TypeScript＋jest＋enzymeでのテスト環境構築

Rails＋webpacker＋Reactのフロントにテストコードを導入した時のメモ。結構やることがあった。。

最近はReactのテスト環境の動向調べると、テストフレームワークjestにテストユーティリティツールのEnzymeの組み合わせがメジャーっぽいので素直に採用した。

入れたライブラリ

最初に実行したのが以下

yarn add --dev jest enzyme enzyme-adapter-react-16 jest-enzyme

それぞれ何かというと

ライブラリ名	内容
jest	javascriptのテストフレームワーク。少し前はmochaが人気だったけど最近はこっちが主流らしい。ReactやGraphQLと同じFacebook製
enzyme	airbnbが作ったReactのテストユーティリティツール。
enzyme-adapter-react-16	enzymeをReactで使うために必要
jest-enzyme	enzymeをjestで使うために必要

設定ファイル変更

ライブラリインストールしただけではダメでpackage.jsonの設定が必要らしいので設定していく。

まずjestのrootsを設定する。今回はRails内のapp/frontendにtsxファイルを置いていたのでテスト対象のパスと拡張子を設定。

package.json

  "devDependencies": {
   
  },
  "jest": {
    "roots": [
      "app/frontend"
    ],
    "moduleFileExtensions": [
      "js",
      "ts",
      "tsx",
      "jsx"
    ]
  },

あとyarn testでテストの実行できるようにscript追加。

  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch"
  }

TypeScript対応

ここテストコード書いてyarn testを実行してみる

内容はこんな感じ。テスト対象と同じパスに置いた。

app.test.tsx

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import App from './app';

Enzyme.configure({ adapter: new Adapter() });

describe('view', () => {
  test('app component', () => {
    const wrapper = shallow(<App />);
    expect(wrapper).toMatchSnapshot();
  });
});

が、「syntax error: “interface is a reserved word in strict mode”」でテストが通らない。内容的に素のJavaScriptにはないinterfaceでエラーになっているのでjestがTypeScriptに対応していないっぽい。

https://jestjs.io/docs/ja/getting-started#typescript-%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B

結局公式サイトにあるようにyarn add --dev babel-jest @babel/preset-typescriptしてbabel.config.jsのpresetsに追記することで解消した。

jestjs.io

presets: [
      "@babel/preset-typescript",

この状態で適当にtoMatchSnapshotマッチャでコードを書いて動かすと通った

VScodeの警告

これでyarn test が通るようにはなったけどなぜかVScodeが赤くなった。

Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.ts(2582)

警告通りにyarn add --dev @types/jestしてワークスペース追加しなおして解消。

これで他のマッチャでテスト書いても動く状態になった。