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()
omockImplementationOnce()
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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post