szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript:javascript_teszt|< JavaScript teszt]]

====== JavaScript teszt - Jest ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Webhely =====

A Jest egy JavaScript tesztelő keretrendszer, ami az egyszerűségre törekszik.

Webhely:

  * https://jestjs.io/


===== Telepítés =====

  npm install --save-dev jest


===== Bejegyzés a package.json fájlba =====


<code javascript package.json>
  "scripts": {
    "test": "jest",
  },
</code>

ECMAScript modulok esetén:

<code javascript package.json>
  "type": "module",
  "scripts": {
    "test": "node --experimental-vm-modules node_modules/.bin/jest",
  },
</code>

===== Teszt létrehozása =====

Tetszőleges könyvtárban hozzunk létre egy **.spec.js** vagy egy **.test.js** kiterjesztésű fájlt.
A könyvtár neve célszerűen lehet test

<code>
projekt01/
  `-test/
     `-valami.spec.js
</code>



<code>
projekt01/
  `-test/
     `-valami.test.js
</code>


A .spec.js és a .test.js kiterjesztésű fájlt a jest megtalálja.


==== __tests__ ====

A másik lehetőség, hogy egy __tests__ nevű könyvtárba rakjuk a teszteket.
Így nem szükséges a spec.js kiterjesztés, elég a js.

<code>
projekt01/
  `-__tests__/
     `-valami.js
</code>

===== A teszt tartalma =====


Kezdetnek legyen egy teszt, ami 1-t vár és egyet is kap.

<code javascript valami.spec.js>
it('works', () => {
    expect(1).toBe(1);
});
</code>

==== Összeadó ====

Legyen egy sum.js nevű fájl. 

<code javascript sum.js>
function sum(num1, num2) {
  return num1 + num2;
}
module.exports = sum;
</code>


<code javascript sum.spec.js>
const sum = require('./sum');

test('összeadás: 2 + 3 = 5', () => {
  expect(sum(2, 3)).toBe(5);
});
</code>

==== Osztály metódusa, adatagja ====

<code javascript test/app.spec.js>

import { Triangle } from "../src/js/triangle";

it('30, 35-re 525.0 működik', () => {
    const tri = new Triangle();
    expect(tri.calcArea(30, 35)).toBe(525.0);
})

it('A calcArea() létezik', () => {
    const tri = new Triangle();
    expect(tri.calcArea()).toBeDefined();
})

it('Az area tulajdonság létezik', () => {
    const tri = new Triangle();
    expect(tri.area).toBeDefined();
})
</code>


===== Teszt futtatása =====

Ha tettünk bejegyzést a package.json fájl scripts szakaszába, a futtatás:
  npm test


===== describe =====


A teszteket egy describe() függvénnyel csoportosíthatjuk. 
Első paramétere egy string, második paraméterek egy visszahívó függvény (callback). 

<code javascript valami.spec.js>
describe("Artimetika", () => {
  test("Valami név", () => {
    // ide jön a teszt
  });
});
</code>


===== ECMAScript babel csomaggal =====


  yarn add --dev jest
  yarn add --dev babel-jest
  yarn add --dev @babel/preset-env

Részlet a **package.json** fájlból:

<code javascript package.json>
  "type": "module",
  "scripts": {
    "test": "jest",
  },
  "jest": {
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  },
</code>

Készítsünk egy **.babelrc** nevű fájlt a következő tartalommal:

<code javascript .babelrc>
{
    "presets": ["@babel/preset-env"]
}
</code>

===== Minta =====

  * https://github.com/oktat/jstriangle
===== Források =====

  * https://jestjs.io/ (2021)
  * https://www.valentinog.com/blog/jest/ (2021)