jest introduction

Transcript

1. Jest 松永遼太
2. 話すこと Jest について 話なさないこと youtubeチャンネル
3. Jest とは
4. JavaScript のテスティングフレームワーク TypeScript, Node, React, Angular, Vue, Babel などに対応 テストがシンプルにできる
5. インストールする際は
6. https://jestjs.io/docs/ja/getting-started
7. "name": ”reverseInt_test", "version": "1.0.0", "main": "app.js", "scripts": { "test": "jest" }, "author": "", "license": "ISC", "devDependencies": { "jest": "^24.9.0" }, "dependencies": {}, "description": "" Package.json
8. npm run test / yarn testでテストを実⾏できる
9. PASS ./reverseInt.test.js ✓ reverseIntのユニットテスト (6ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.816s, estimated 2s Ran all test suites. FAIL ./reverseInt.test.js ✕ reverseIntのユニットテスト (3ms) どこのテストが失敗したか教えてくれ る時もある
10. Matchers
11. Jest では、matcher を使⽤して、様々な⽅法で値のテストをする ことができます。 この時に使われる関数は test expect toBeなど
12. var reverseInt = function(x) { if (x === 0) return 0; const sign = (x > 0) ? 1 : -1; if (x < 0){ x = x * -1; } let reversedInt = 0; while(x > 0){ reversedInt = (reversedInt * 10) + (x % 10); x = Math.floor(x/10); } return reversedInt * sign; }; こういう関数があったとします
13. test('reverseIntのユニットテスト', () => { expect(reverseInt(0)).toBe(0); expect(reverseInt(3)).toBe(3); expect(reverseInt(51)).toBe(15); expect(reverseInt(300)).toBe(3); expect(reverseInt(123456789)).toBe(987654321); expect(reverseInt(-311)).toBe(-113); //他にも expect(reverseInt(null)).toBeNull(); expect(reverseInt(true)).toBeTruthy(); expect(reverseInt(5)).toBeDefined(); expect(reverseInt(false)).toBeFalsy(); }); Jestでmatcherを使ったテストはこんな感じ
14. expect は “expectation” オブジェクトを返します。 toBeはObject.isを使って値を⽐べている expect(2 + 2).toBe(4)
15. じゃーオブジェクト同⼠を⽐べるには？ const user = {name: “Ryota”,}; user[‘age'] = 20; expect(user).toEqual({name: Ryota, age: 20});
16. ⾮同期
17. ⾮同期動のコードがある場合は Jestはテスト対象のコードがいつ 完了したかを別のテストに進む前に知る必要があります。 そのためにdone( )などの関数があります。 *Done を使うのはcallback を使って⾮同期をしている場合 https://jestjs.io/docs/ja/asynchronous
18. Async/ await を使おう
19. ⾮同期のコードをテストする場合はjavascript でも使う async/await を使ったほうがシンプル test(‘the data is peanut butter’, async () => { const data = await fetchData(); expect(data).toBe('peanut butter’); });
20. テストの構成
21. テストを実⾏する前にいくつかのセットアップ作業をしたり、テ ストが終了した後にいくつかの仕上げ作業をしたい場合がありま す
22. 例えば、テストの前にデータベースを初期化し、テスト後はデータベースのデータを削除 しい
23. beforeEach(() => { initializeDatabase(); }); afterEach(() => { clearDatabase(); }); });
24. スコープ
25. describe('matching cities to foods', () => { beforeEach(() => { return initializeFoodDatabase(); }); test('Vienna <3 sausage', () => { expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true); }); test('San Juan <3 plantains', () => { expect(isValidCityFoodPair(‘San Juan’, 'Mofongo')).toBe(true); }); });
26. describe ブロックの中にあるときは、 before などが ある場合 、 describe はdescribe ブロックの中のテストにだけに適⽤されます
27. モック関数
28. モック関数を使えば、複雑なコードも分解してテストできる
29. 複雑な関数を分解してテスト const mockCallback = jest.fn(x => 42 + x); forEach([0, 1], mockCallback); expect(mockCallback.mock.calls.length).toBe(2); expect(mockCallback.mock.calls[0][0]).toBe(0); expect(mockCallback.mock.calls[1][0]).toBe(1); expect(mockCallback.mock.results[0].value).toBe(42);
30. コードにテスト⽤の値を⼊れるのにも利⽤できます const myMock = jest.fn(); myMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true); console.log(myMock(), myMock(), myMock(), myMock()); // 10, 'x', true, true
31. Jest 応⽤編 Coming up next ……
32. https://jestjs.io/ja/