Upgrade to Pro — share decks privately, control downloads, hide ads and more …

とうとうJestを導入してみた話

ricky
July 03, 2019

 とうとうJestを導入してみた話

React×TypeScript環境にユニットテストツール「Jest」を導入してみた話です

ricky

July 03, 2019
Tweet

Other Decks in Programming

Transcript

  1. WHO AM I 2 小澤 力也(おざわ りきや)@rikipedia_uw • 株式会社ウィルゲート •

    エンジニア・広報 • 技術:JavaScript(TS)・React(8ヶ月) • React LT会にずっと参加したかった
  2. スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import

    renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); }); 15 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing import React from 'react' import Link from '../Link.react' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx
  3. スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import

    renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); }); 16 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing 必要なライブラリなどを import import React from 'react' import Link from '../Link.react' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx
  4. スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import

    renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); }); 17 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing Reactコンポーネントを生成し、 Json形式に変換 import React from 'react' import Link from '../Link.react' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx
  5. スナップショットテストの書き方 import React from 'react' import Link from '../Link.react' import

    renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) 18 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing 1回目:スナップショットファイル生成 2回目以降:前回のファイルと比較して OKなら通過 component.test.tsx
  6. スナップショットテストファイル exports[`renders correctly 1`] = ` <a className="normal" href="http://www.facebook.com" onMouseEnter={[Function]}

    onMouseLeave={[Function]} > Facebook </a> ` 19 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing __snapshots__/component.test.tsx.snap
  7. スナップショットテストファイル exports[`renders correctly 1`] = ` <a className="normal" href="http://www.facebook.com" onMouseEnter={[Function]}

    onMouseLeave={[Function]} > Facebook </a> ` 20 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing __snapshots__/component.test.tsx.snap 手動での書き換えは怒られる