web-dev-qa-db-ja.com

酵素はアダプターが構成されることを期待しています

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});
});

また、「setupTests.js」という名前の「src」フォルダーの下に次のコンテンツを含むファイルを追加しました。

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

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

私はそれを実行しました：

npmテスト

そして、私はエラーを得ました：

酵素の内部エラー：酵素はアダプタが設定されることを期待していますが、どれも見つかりませんでした。アダプターを構成するには、Enzyme.configure({ > adapter: new Adapter() })を呼び出す必要があります

この問題を解決できるものを知っていますか？

reactjsenzymecreate-react-app
24
CrazySynthax

テストケースファイルに追加します。

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

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

また、setupTests.jsファイルをすべてのテストファイルにインポートしたくない場合は、package.jsonフォルダーに配置できます。

  "jest": {
     "setupTestFrameworkScriptFile": "./test/setupTests.js" }

更新：

Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.

https://jestjs.io/docs/en/configuration

12
type_master_flash

ファイル「setupTests」をテストファイルにインポートする必要があります。

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

test('message box', ()=> {
     ...
})
7
CrazySynthax

Priyankが言った のように、Create React Appを使用している場合、src/setupTests.jsから構成を取得します。

追加：

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })
4
Mikel

次のようにインポートを使用する必要があります。

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

この方法：（import * as Adapter from ...）は、「TypeError：Adapter is not constructor。」というメッセージを返します。

3
Filipe Natanael

import React from 'react';をファイルの先頭に追加します。

JSX構文<MessageBox app={app}/>を使用しています。これは transpiles をReact.createComponent(...)に変換します。これが機能するためには、React変数をファイルのスコープで定義する必要があります。

2
user3707125

多くの回答は、テストファイルにsetupTests.jsをインポートすると言っています。または、各テストファイルで酵素アダプターを構成します。これは差し迫った問題を解決します。

ただし、長期的には、jest.config.jsファイルをプロジェクトルートに追加する場合。起動時にセットアップファイルを実行するように構成できます。

jest.config.js

module.exports = {
  setupTestFrameworkScriptFile: "<rootDir>/src/setupTests.ts"
}

これにより、起動するたびにsetupTest.tsを実行するようにJestに指示します。

この方法で、ポリフィルを追加したり、localstorageのようなグローバルモックを追加する必要がある場合は、setupTestsファイルに追加して、どこでも設定できます。

EnzymeのドキュメントはJestとの統合をカバーしていないため、これら2つを融合するのは混乱しています。

2
Lex

ライブラリの最新バージョンを使用して、この質問のすべての回答で報告された同じエラーに直面しました。エラー：TypeError：アダプターはコンストラクターではありません。

Enzymeを使用してReactJSコンポーネントを適切にテストするために必要なすべてのステップをグループ化しました（Jestを使用しましたが、Mochaでも動作する可能性があります。その場合は、メインのテストパッケージを切り替えるだけです） ）：

1）ライブラリ（package.json）：

"dependencies": {
    "jest": "^24.6.0",
    (...)
}
"devDependencies": {
    "chai": "^4.2.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
   (...)
}

2）テスト設定：すべてのテストで酵素を設定できます。しかし、type_master_flashが賢明に示唆したように、それを行うスクリプトを追加できます。そのためには、同じレベルのセッションスクリプト、依存関係などでpackage.jsonファイルに新しい設定を作成します：

Jestバージョン23.x（またはそれ以前）：

"devDependencies": { 
     (...) 
 },
"jest": {
    "setupTestFrameworkScriptFile": "./tests.setup.js"
 },

Jest 24.0バージョンの後：Jestドキュメンテーション によると、「setupTestFrameworkScriptFileは廃止され、setupFilesAfterEnvが優先されます。 」。

"devDependencies": { 
     (...) 
 },
"jest": {
    "setupFilesAfterEnv": ["./tests.setup.js"]
 },

このファイルは好きな場所に置くことができ、好きな名前を付けることができます。適切なファイルの場所をセットアップすることを忘れないでください。現在の例では、プロジェクトのルートにファイルを保存しています。

3）tests.setup.js： Enzyme：TypeError：Adapter is not constructor is not constructor 、ここでの問題は、「import ' 'デフォルトのエクスポートを備えたモジュール」。ファイルを設定する適切な方法は次のとおりです。

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

それだけで、コンポーネントをテストできます。

応援し、これが役立つことを願っています。

1
Daniel Santana

このように試してみてください。

import React from 'react';
import App from './containers/App';
import enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

describe('App Screen', () => {
  let mountedAppScreen;
  let props;

  const appScreen = () => {
    if (!mountedAppScreen) {
      mountedAppScreen = enzyme.mount(
        <App {...props} />
      );
    }
    return mountedAppScreen;
  }
  it("it always renders div", () => {
    const divs = appScreen().find("div");
    expect(divs.length).toBeGreaterThanOrEqual(1);
  });
});
1
Tolga D.

将来これを読むすべての人にとって、setupTestFrameworkScriptFileは、新しいバージョンでは documentation によってsetupFilesAfterEnvを支持して廃止されます。次のようにファイルを追加できます。

"setupFiles": [
    "<rootDir>/src/setupTests.js"
]
0
Irandoust