React v16でAirbnbのenzymeを使う時の覚書
「React v16が出たぞやったー」ってなって早速yarn upgradeとかすると、こういうエラーで死にます。 FAIL src/App.test.js ● renders without crashing Enzy […]
広告ここから
広告ここまで
目次
「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.
無事成功しました。