8 Mga Bagay na Nagpapatibay na Jest ang Pinakamahusay na React Testing Framework

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Pangkalahatang Ideya

Ang Jest ay isang bukas na JavaScript testing library mula sa Facebook. Ang sawikain nito ay "Delightful JavaScript Testing". Bagama’t ang Jest ay maaring gamitin upang subukin ang anumang JavaScript library, ito ay tanyag pagdating sa React at React Native.

Hindi na nakapagtataka dahil ang dalawang ito, ang React at Jest ay mula sa Facebook, kung saan ay pangunahing gumagamit ng dalawang ito.Sa pagtuturong ito ipapakita ko sa iyo ang walong iba’t-ibang aspeto ng Jest na nagagawa nitong nkakalugod para sa pagsubok ng React applications.

1. Ang Pag-set Up ng Jest ay Hayahay lamang

Ang Jest ay madali lamang i-install sa sarili nito. Maari mo itong i-install sa bakanteng direkta gamit ang alinman san pm o yarn. Mas gusto ko ang yarn. Tignan ang 6 na mga Bagay Na Nagpapatibay na Yarn ang Pinakamahusay na Javascript Package Manager na para maintindihan kung bakit. Ito’y kasing dali ng:

yarn add --dev jest

Kung mas gusto mo ang npm, kung gayon i-type ang:

npm install --save-dev jest

Bago tayo makapag-test, magsulat tayo ng ilang code para i-test. Narito ang palindrome.js:

function isPalindrome(s) {
  const count = s.length - 1
  if count < 2 {
      return true
  }
  
  for (i = 0; i < (count + 1) / 2; ++i) {
    if (s[i] !== s[count - i])
      return false
  }
  return true
}

module.exports = isPalindrome

Narito ang isang jest test sa isang file tinatawag na palindrome.test.js:

const isPalindrome = require('./palindrome')

test('it detects palindromes', () => {
  expect(isPalindrome('palindrome')).toBe(false)
  expect(isPalindrome('')).toBe(true)
  expect(isPalindrome('a')).toBe(true)
  expect(isPalindrome('gg')).toBe(true)
  expect(isPalindrome('pop')).toBe(true)
  expect(isPalindrome('1212')).toBe(false)
})

Upang mapa-andar ang mga tests, idagdag ito sa package.json:

  "scripts": {
    "test": "jest"
  }

Maari mo nang paandarin ang test sa pamamagitan ng yarn test o npm test:

> yarn test
yarn run v1.1.0
warning package.json: No license field
$ jest
 PASS  ./palindrome.test.js
  ✓ it detects palindromes (6ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.667s
Ran all test suites.
✨  Done in 3.15s.

Ito ay napakadali. Ngunit kung gagamitin mo ang react-create-app upang lumikha ng iyong React project, hindi mo na kailangan pang gawin iyon. Ang jest package ay may kasama na, at maari ka nang magsimula ng pagsulat ng mga tests kaagad.

2. Ang Jest ay Napakabilis

Ang Jest ay mabilis.Napakabilis. Kung ang iyong mga pagsubok ay nakasaklaw lamang sa CPU, ito’y maaring makabawas ng makabuluhang oras mula sa iyong mga test runs. Ang Airbnb ay lumipat mula Mocha patungo sa Jest, at ang kanilang kabuuang test runtime ay bumagsak mula sa higit sa 12 minuto hanggang sa 4.5 minuto lamang sa heavy-duty CI machine na may 32 cores. Local test ay gumamit ng 45 minuto, kung saan ay bumagsak hanggang sa 14.5 minuto.

Ano ang nakapag-papabilis sa Jest? Ito ay kombinasyon ng ilang mga kadahilanan:

Parallelization: ito ay sadyang halata, at iba pang test frameworks ay gamit rin ito.
Paandarin ang pinakamabagal na pagsubok muna: sinisiguro nito na lahat ng cores ay nagagamit nang sagad.
Caching babel transforms: pinabababa ang CPU-intensive babel transforms.

3. Ang Jest ay isang One-Stop Shop

Ang Jest ay may kasama nang built-in matchers, spies, at ang sarili nitong malawak na mocking library. Ito’y naka-base noon sa Jasmine, kung kaya’t minanang lahat ang kagalingan ng Jasmine. Ngunit sa mas bagong bersyon ang Jest ay humiwalay na mula sa Jasmine, ngunit nanatili ang functionality nito at nagdagdag ng sarili nitong timpla at mga pagpapabuti.

Kapag ihahalintulad ito sa isang bespoke testing solution batay sa Mocha, malinaw na ang madaling paggamit ay isang pangunahing alalahanin ng Jest design.

4. Ang Jest ay May Kahanga-hangang Mocks

Ang Mocking ay isang napakahalagang bahagi ng unit testing. Ito ay mas lalong mahalaga kung pinahahalagahan mo ang fast tests(at sinong hindi?).

Pinahihintulutan ng Mocking na palitan ang walang kinalaman na dependencies na marahil ay mabagal at ito rin ay nag-kontrol ng oras para sa mga code na umaasa sa tiyempo.Binibigyan ka ng Jest ng lubos na kontrol sa iyong dependencies at master time.

Karaniwan mga tungkulin ng Mock

Ang Mocking dependencies ay isang malaon nang tradisyon ng unit test. Kung ang iyong code ay nagbabasa ng file, nagsusulat sa file,tumatawag sa ilang remote services o may ina-access na database,maari itong mabagal at maari itong maging kumplikado i-configure at linisin pagkatapos ng test. Kapag tumatakbo ng magkahilera, ito ay maaring hindi ma-kontrol ng maayos.

Sa mga kasong ganito,mas makabubuti kung papalitan ang totoong dependency nang isang mock function na walang gagawin kungdi itala ang mga katunayan na ito’y tinawagan, para iyong mapatunayan ang daloy ng trabaho. Ang jest.fn() mock function ay napapahintulutan kang magbigay ng canned return values (para sa maramihang sunod-sunod na mga tawag),at itinatala nito kung ilan beses itong tinawagan at kung ano ang mga parameter sa bawat tawag

Manual Module Mocks

Kung minsan ay kailangan mong palitan ang isang buong module nang data nito kaysa sa ilang mga function. Hinahayaan ka ng Jest na gawin ito sa pamamagitan ng paglagay ng sarili mong module ng kaparehas na pangalan sa __mocks__sub-directory.

Sa tuwing ginagamit ng iyong code ang target module, i-aacess nito ang iyong mock kaysa sa real module.Maari ka rin pumili ng ilan tests para gamitin ang ilang original module sa pamamagitan ng pagtawag sa jest.Unmock('moduleName')

Timer Mocks

Ang tiyempo ay ang sanhi ng pagkagipit ng unit tests.Paano kung gusto mong mag-test code at ang oras ay natapos na pagkatapos ng isang minuto? Code na nilulunsad kada 30 segundo?Special code na nagpapatakbo ng isang reconciliation algorithm sa katapusan ng buwan?

Ang mga iyon ay napakahirap i-test. Ikaw ay maaring sumuko sa kinakailangang tiyempo ng original code (at pagkatapos ang iyong mga tests ay magiging sobrang bagal), o maari mong manipulahin ang oras, kung saan ay mas magiging kapaki-pakinabang. Hinayaan ka ng Jest na kontrolin ang mga sumusunod na timer-related functons:

setTimeout()
setInterval()
clearTimeout()
clearInterval()

ES6 Class Mocks

Ang Jest ay lubos na sumusuporta sa ES6 classes at nagbibigay ng iba’t-ibang mga paraan upang i-mock sila:

Automatic mock: hinahayaan kang magmanman sa mga tawag sa constructor at lahat ng mga pamamaraan, ngunit laging bumabalik na hindi tiyak.
Manual mock:isakatuparan ang sarili mong mock sa __mocks__ sub-directory.
I-mock ang class factory nang isang higher-order function.
Selective mocking gamit ang mockImplementation() o mockImplementationOnce()

5. Sinusuportahan ng Jest ang TypeScript

Ang TypeScript ay isang sikat na typed superset ng JavaScript na nagtatala tungo sa karaniwan JavaScript.Jest na sumusuporta sa TypeScript via the ts-jest package. Inilalarawan nito ang sarili bilang isang TypeScript preprocessor na mayroon source map support para sa Jest at may napaka-aktibong komunidad.

6. Saklaw Ka Ng Jest

Ang Jest ay may built-in coverage reports.Ang iyong mga test ay mabuti lamang bilang kanilang saklaw.Kung nag-test ka lang ng 80% ng iyong code, at saka bugs sa ilang 20% ang natagpuan lamang sa produksyon.

Kung minsan,ay may kabuluhan mula sa perspektibo ng negosyo na libanan ang testing para sa ilang parte ng sistema. Halimabawa, internal tools na ginamit ng iyong mga bihasang inhinyero at madalas na pagbabago ay maaring hindi na kailangan ng parehas na antas ng napakahigpit na testing gaya ng iyong production code. Ngunit, sa anupaman, ito ay dapat na isang desisyon nang may kamalayan,at dapat mong makita ng ganap ang sakop ng test ng iba’t-ibang parte ng iyong sistema.

Narito ang kung paano bumuo ng coverage report para sa simple palindrome na halimbawa:

> yarn test --coverage
yarn run v1.1.0
warning package.json: No license field
$ jest "--coverage"
 PASS  ./palindrome.test.js
  ✓ it detects palindromes (4ms)

-------------- |----------|----------|----------|----------|
File           |  % Stmts | % Branch |  % Funcs |  % Lines |
-------------- |----------|----------|----------|----------|
All files      |      100 |      100 |      100 |      100 |
 palindrome.js |      100 |      100 |      100 |      100 |
-------------- |----------|----------|----------|----------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.712s
Ran all test suites.
✨  Done in 3.41s.

7. Ang Jest ay May Snapshots

Ang Snapshot testing ay kahanga-hanga.Hinahayaan ka nitong makuhanan ang hanay na kumakatawan sa iyong ginawaran na bahagi at itago ito sa isang file. Pagkatapos ay maari mo itong ikumpara kinamamayaan para masiguro na ang UI ay hindi nagbago. Bagama’t ito ay tamang-tama para sa React at React Native app, maari mong gamitin ang snapshots para ikumpara ang serialized values ng ibang frameworks. Kung pinalitan mo talaga ang iyong UI kung gayon ay kailangan mong i-update ang iyong snapshot files para ito ay maipakita.

8. Ang Jest ay May Delta Testing Ng Relos

Ang Jest ay maaring gumana sa watch mode, kung saan ay umaandar ng awtomatiko ang mga test sa tuwing papalitan mo ang code. Pagaganahin mo ito sa pamamagitan ng –watchAll command-line argument, at ito ay mag-monitor sa iyong application para sa mga pagbabago. Pinaandar ko ang jest sa watch mode at magpasok ng bug ng sadya sa palindrome.js,at heto ang resulta:

 FAIL  ./palindrome.test.js
  ✕ it detects palindromes (11ms)

  ● it detects palindromes

    expect(received).toBe(expected) // Object.is equality

    Expected value to be:
      true
    Received:
      false

       6 |   expect(isPalindrome('a')).toBe(true)
       7 |   expect(isPalindrome('gg')).toBe(true)
    >  8 |   expect(isPalindrome('pop')).toBe(true)
       9 |   expect(isPalindrome('1212')).toBe(false)
      10 | })
      11 |

      at Object.<anonymous>.test (palindrome.test.js:8:30)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.598s, estimated 1s
Ran all test suites.

Watch Usage: Press w to show more.

Konklusyon

Ang Jest ay mabilis na testing framework na madaling i-set up.Ito ay aktibong lumago at ginamit ng Facebook para i-test ang lahat ng kanilang React applications pati na rin ang nakararaming mga developers at mga kumpanya.

Ito ay mayroon na nang lahat ng iyong kailangan sa isang convenient package, supports TypeScript, at ang IMO ay ang pinakamahusay na pagpipilian para sa React and React Native application testing.Ito ay kahit na lumipat mula sa ibang testing solutions.

Tandaan, ang React ay lumawak na sa kasikatan. Sa katunayan, mayroon kaming ilang mga bagay sa Envato Market na mayroon para bilhin, suriin,pagpapatupad, at iba pa. Kung ikaw ay naghahanap ng karagdagang mga mapagkukunan sa palibot ng React, huwag magatubiling tignan ang mga ito.