Jest 松永遼太

話すこと Jest について 話なさないこと youtubeチャンネル

Jest とは

JavaScript のテスティングフレームワーク TypeScript, Node, React, Angular, Vue, Babel などに対応 テストがシンプルにできる

インストールする際は

https://jestjs.io/docs/ja/getting-started

"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

npm run test / yarn testでテストを実⾏できる

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) どこのテストが失敗したか教えてくれ る時もある

Matchers

Jest では、matcher を使⽤して、様々な⽅法で値のテストをする ことができます。 この時に使われる関数は test expect toBeなど

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; }; こういう関数があったとします

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を使ったテストはこんな感じ

expect は “expectation” オブジェクトを返します。 toBeはObject.isを使って値を⽐べている expect(2 + 2).toBe(4)

じゃーオブジェクト同⼠を⽐べるには？ const user = {name: “Ryota”,}; user[‘age'] = 20; expect(user).toEqual({name: Ryota, age: 20});

⾮同期

⾮同期動のコードがある場合は Jestはテスト対象のコードがいつ 完了したかを別のテストに進む前に知る必要があります。 そのためにdone( )などの関数があります。 *Done を使うのはcallback を使って⾮同期をしている場合 https://jestjs.io/docs/ja/asynchronous

Async/ await を使おう

⾮同期のコードをテストする場合はjavascript でも使う async/await を使ったほうがシンプル test(‘the data is peanut butter’, async () => { const data = await fetchData(); expect(data).toBe('peanut butter’); });

テストの構成

テストを実⾏する前にいくつかのセットアップ作業をしたり、テ ストが終了した後にいくつかの仕上げ作業をしたい場合がありま す

例えば、テストの前にデータベースを初期化し、テスト後はデータベースのデータを削除 しい

beforeEach(() => { initializeDatabase(); }); afterEach(() => { clearDatabase(); }); });

スコープ

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); }); });

describe ブロックの中にあるときは、 before などが ある場合 、 describe はdescribe ブロックの中のテストにだけに適⽤されます

モック関数

モック関数を使えば、複雑なコードも分解してテストできる

複雑な関数を分解してテスト 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);

コードにテスト⽤の値を⼊れるのにも利⽤できます const myMock = jest.fn(); myMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true); console.log(myMock(), myMock(), myMock(), myMock()); // 10, 'x', true, true

Jest 応⽤編 Coming up next ……

https://jestjs.io/ja/