1. ホーム
  2. reactjs

エンザイムはアダプターの構成を期待している

2023-09-04 15:07:30

質問

create-react-appで新しいReactアプリケーションを作成し、その中で作成した"MessageBox"というコンポーネントに対してユニットテストを書きたいと思いました。これは、私が書いたユニットテストです。

import MessageBox from "../MessageBox";
import { shallow } from 'enzyme';
import React from 'react';

test('message box', () => {
   const app = {setState: jest.fn()};
   const wrapper = shallow(<MessageBox app={app}/>);
   wrapper.find('button').at(0).simulate('click');
   expect(app.setState).toHaveBeenLastCalledWith({modalIsOpen: false});
});

また、「src」フォルダの下に「setupTests.js」という名前でファイルを追加し、その内容を記述しています。

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

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

で実行しました。

<ブロッククオート

npmテスト

を実行したところ、エラーが発生しました。

Enzyme 内部エラー。Enzyme はアダプタが設定されていることを期待しますが、何も見つかりませんでした。 が見つかりませんでした。アダプタを設定するには Enzyme.configure({ > adapter: new Adapter() })

この問題を解決できるものをご存知ですか?

どのように解決するのですか?

テストケースファイルに追加してください。

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { shallow, configure } from 'enzyme';

configure({adapter: new Adapter()});
test('message box', ()=> {
     ...
})