React 入門 (5) ～ React x Typescript x Jest でテスト ～

今回もJestの記事だが、React x Typescript x Jest の組み合わせを書いてなかったな。ということで。

Jest · TypeScript Deep Dive

今回も参考にするのはこの記事。その中の Example enzyme という章を参照する。

enzyme ってのはよくわからんですが、React でテストするときに便利になる感じのライブラリらしい。

必要なパッケージをインストール

$ npm i enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 -D

ただ、これだけだと、テスト実行時に enzyme-adapter-reacta-16 の 定義がないと怒られてしまうので、以下のパッケージもインストールする

$ npm i @types/enzyme-adapter-react-16 -D

jest.config.js に設定を追記

module.exports = {
  // OTHER PORTIONS AS MENTIONED BEFORE

  // Setup Enzyme
  "snapshotSerializers": ["enzyme-to-json/serializer"],
  // 参考元記事では "setupTestFrameworkScriptFIle" を使用していたが
  // 廃止予定 ということで新しいほうの記述で書く
  "setupFilesAfterEnv": ["./src/setupEnzyme.ts"],
}

src/setupEnzyme.ts ファイルの作成

import { configure } from 'enzyme';
import * as EnzymeAdapter from 'enzyme-adapter-react-16';
configure({ adapter: new EnzymeAdapter() });

src/components/checkboxWithLabel.tsx, src/components/checkboxWithLabel.test.tsx の作成

ここは参考元と一緒なので割愛

テスト実行

$ npx jest

すると以下のようなエラーがでる。（はず）

 FAIL  src/components/checkboxWithLabel.test.tsx
  ● Test suite failed to run

    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    src/components/checkboxWithLabel.tsx:9:15 - error TS7006: Parameter 'props' implicitly has an 'any' type.

    9   constructor(props) {
                    ~~~~~

props の型指定がないよ。ということなのかな？と思ったので。つける。

import * as React from 'react';

export class CheckboxWithLabel extends React.Component<{
  labelOn: string,
  labelOff: string
}, {
    isChecked: boolean
  }> {
  constructor(props: any) { // ここを変えた
    super(props);
    this.state = { isChecked: false };
  }
  ...

も一度テストを実行すると通った。

おわり。

成果物は以下。

GitHub - bamchoh/react-study at 2019-01-26