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.
    
    

    無事成功しました。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark