React v16でAirbnbのenzymeを使う時の覚書

「React v16が出たぞやったー」ってなって早速yarn upgradeとかすると、こういうエラーで死にます。

 FAIL  src/App.test.js
  ● renders without crashing


          Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
          configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
          before using any of Enzyme's top level APIs, where `Adapter` is the adapter
          corresponding to the library currently being tested. For example:

          import Adapter from 'enzyme-adapter-react-15';

          To find out more about this, see https://airbnb.io/enzyme/docs/installation/index.html


      at validateAdapter (node_modules/enzyme/build/validateAdapter.js:14:11)
      at getAdapter (node_modules/enzyme/build/Utils.js:71:36)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:117:44)
      at shallow (node_modules/enzyme/build/shallow.js:19:10)
      at Object.<anonymous>.it (src/App.test.js:8:23)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.21s
Ran all test suites related to changed files.

Installation · Enzymeを見る限り、React v16からはテストのセットアップ方法がちょっと変わるらしいです。

追加パッケージのインストール

「アダプターを入れろ」と言われているので、入れましょう。

$ yarn add -D  enzyme-adapter-react-16

テストコードの変更

あとはアダプターを読み込ませるようにしたらOKです。

/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import App from './App';

import { configure, shallow  } from 'enzyme';

/* === 新規追加ここから ===　*/
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
/* === 新規追加ここまで === */

it('renders without crashing', () => {
  shallow(<App />);
});

テスト再実行

 PASS  src/App.test.js
 PASS  src/sagas/index.test.js

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.314s, estimated 2s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

無事成功しました。