web-dev-qa-db-ja.com

酵素設定ファイルはどこに書くべきですか？

昨日Reactプロジェクトをv16.0にアップグレードしましたが、Enzymeに問題があることがわかりました

    Error: 
      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 http://airbnb.io/enzyme/docs/installation/index.html

    at validateAdapter (spec/components/page_components/SongListItem/index.spec.js:9:1141986)
    at getAdapter (spec/components/page_components/SongListItem/index.spec.js:9:323041)
    at new ReactWrapper (spec/components/page_components/SongListItem/index.spec.js:9:622193)
    at mount (spec/components/page_components/SongListItem/index.spec.js:9:2025476)
    at UserContext.<anonymous> (spec/components/page_components/SongListItem/index.spec.js:9:1235741)

そして、私は公式で解決策を見つけました website

// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

しかし、私には問題があります：酵素設定ファイルはどこに書かれるべきですか？各テストファイルの前に？

上記のコードをテストファイルの1つに追加しようとしましたが、まだ問題があります

 Internal error: attempt to prepend statements in disallowed (non-array) context at C:/Users/killer/workspace/react/NetEase-Cloud-Music-Web/spec/components/page_components/SongListItem/index.spec.js

これ は私のプロジェクトのアドレスです

reactjsenzyme
31
Archie Shi

同様の問題がありました

Jestを使用してテストを実行している場合、test-setup.jsファイルを作成し、酵素ドキュメントからスニペットを追加できます。

// test-setup.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

次に、jest構成にsetupTestFrameworkScriptFileキーを追加し、そのファイルをポイントします。たとえば、jest構成がpackage.jsonにある場合：

// package.json
{
    ...,
    "jest": {
        "setupTestFrameworkScriptFile": "<rootDir>/test-setup.js"
    }
}

jest docsから https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string ：

各テストの前にテストフレームワークを構成またはセットアップするためのコードを実行するモジュールへのパス。 setupFilesはテストフレームワークが環境にインストールされる前に実行されるため、このスクリプトファイルは、テストフレームワークが環境にインストールされた直後にコードを実行する機会を提供します。

これは、jest環境が初期化された後、酵素テストが実行される前に実行されます

create-react-appを使用している人向け
yarn ejectまたはnpm run ejectを実行する必要があり、package.jsonにjest構成が表示されます。
さらに、setupTestFrameworkScriptFileは現在setupFilesAfterEnvの代わりに廃止されています。

48
bradywatkinson

create-react-appを使用しているユーザーの場合、セットアップファイルの予想パスはsrc/setupTests.js。 GitHubの ドキュメント （README）を参照してください：

テスト環境の初期化

注：この機能は、react-scripts @ 0.4.0以降で使用できます。テストでモックする必要があるブラウザーAPIをアプリで使用する場合、またはテストを実行する前にグローバルセットアップのみが必要な場合は、src/setupTests.jsをプロジェクトに追加します。テストを実行する前に自動的に実行されます。

（create-react-appは、少なくともv1.4.1ではpackage.jsonのオプションsetupTestFrameworkScriptFileを処理しないため）。

20
VinceOPS

更新2019年6月

[〜＃〜] cra [〜＃〜]（create-react-app）を使用している場合、src/setupTests.jsは機能しません！プロジェクトのルートフォルダーにjest.config.jsファイルを作成し、以下のコンテンツを貼り付けます。

module.exports = {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(scss|sass|css)$": "identity-obj-proxy"
    },
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
}

ModuleNameMapperは、静的ファイルのインポートステートメントを回避します（オプション）。

setupTestFrameworkScriptFileは廃止されているため、setupFilesAfterEnvプロパティ値を配列として使用する必要があります。

プロジェクトのsrcフォルダーにsetupTests.jsファイルがあることを確認するか、プロジェクトのsetupTests.jsファイルの場所を指定します。

詳細

setupTests.jsファイルには以下のコンテンツが必要です。

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

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

このセットアップは、react 16で機能します

1
Stack Overflow User