web-dev-qa-db-ja.com

酵素アダプター反応16の宣言ファイルが見つかりませんでしたか？

しばらくの間、ReactアプリケーションでコンポーネントをテストするためにEnzymeを使用しています。数週間で初めてパッケージを更新した後、テストでエラーが発生し始めました。

_ FAIL  src/__tests__/title.test.ts
  ● Testing title component › renders
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. [...] 
To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html
_

リンクの説明に従って_'enzyme-adapter-react-16'_をインストールし、テストファイルに次の行を追加します。

_import * as enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });
_

ただし、私のアプリケーションはTypeScriptで記述されているため、2つの新しい問題に直面しています。

error1error2

画像を明確にするために、最初のエラーTS7016は_enzyme-adapter-react-16_の型がないことであり、2番目のエラーTS2339はenzymeにプロパティconfigureがないことを示しています。

私はTypeScriptが比較的初心者なので、助けが必要です。 _enzyme-adapter-react-16_のタイプをインストールしようとしましたが、それらは存在しないようです。

自分でそれらを追加しようとする必要がありますか、またはこの問題をすべて一緒に回避する方法がありますか？

また、このエラーが発生した原因についても興味があります。以前はアダプターは必要ありませんでしたが、なぜですか？

reactjstypescripttestingenzyme
15
langkilde

自分でそれらを追加しようとする必要がありますか、またはこの問題をすべて一緒に回避する方法がありますか？

enzyme-adapter-react-16には現在型が存在しないことは正しいと思います-かなり新しいので、まだ誰も作成していないようです。

それらを自分で作成することができ、それらが適切に定義されていると考えた場合、潜在的に他の人が使用するために DefinitelyTyped に貢献することができます。この問題を「回避」するために、TypeScriptに型情報がないという事実を無視させることができます。

型エラーを無視するには：

  • 最初のエラーの場合、エラーメッセージは「新しい宣言（.d.ts）ファイルの追加...」を支援しようとします。そのため、enzymeAdapter.d.tsのような名前のファイル（通常は "/ types"というフォルダーに保存します）を作成し、その内容をdeclare module 'enzyme-adapter-react-16';にします（エラーメッセージから）。これは基本的に、インポートされたオブジェクトをanyタイプとして扱うようにTypeScriptに指示します（つまり、タイプチェックなし）。

  • 2番目のエラーの場合、enzymeインポートをanyにキャストしてから、configureを呼び出すことができます。例：(enzyme as any).configure({ adapter: new Adapter() });。 tslintがanyの使用について文句を言う場合、上記の// tslint:disable-next-line:no-anyコメントでその行だけを無視するようにできます。

完全なコード：

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

// tslint:disable-next-line:no-any
(enzyme as any).configure({ adapter: new Adapter() });

また、このエラーが発生した原因についても興味があります。以前はアダプターは必要ありませんでしたが、なぜ今ですか？

これは、バージョン3のenzymeプロジェクトからの新しい設計選択です。バージョン2.xからの主要な変更に関する詳細を読むことができます here 。アダプターのアプローチは、Reactのさまざまなバージョンをサポートするためのさまざまな要件をより簡単かつ一貫して処理できるようにすることだと思います。

20
Jono Job

React 16+を使用していて、アプリをイジェクトして次のパッケージを追加している場合：

yarn add enzyme react-test-renderer enzyme-adapter-react-16 --dev

次に、src/setupTests.jsファイルを作成してEnzymeをセットアップする必要があります。これを追加：

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

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

最後に、package.jsonを修正する必要があります-/src/setupTests.jsをsetupFiles配列に追加します。

"setupFiles": [
  "<rootDir>/config/polyfills.js",
  "<rootDir>/src/setupTests.js"
],

setupFiles配列を修正

前： スクリーンショットの前

後： スクリーンショットの後

緑は素敵な色だということはみんな同意できると思います!!

14
Anas

解決するには長すぎた。これが誰かを助けることを願っています：

Create-React-App 2.1.3を酵素3.8.0、enzyme-adapter-react-16で使用する：1.7.1、enzyme-to-json 23.6.0

私のためのソリューション：

src/setupTests.js：

import Enzyme, { configure } from "enzyme";
const Adapter = require("enzyme-adapter-react-16");

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

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

次に、コンポーネントで、酵素とジェストでテストしたい：

import React from "react";
import Enzyme from "enzyme";
import Component from "./component";

const { shallow } = Enzyme; //whatever you want to use here



test("component exists", () => {
  expect(Component).toBeDefined();
});

//これは必須ではありませんが、完全を期すために、他の設定は行われていません：

package.json：

"jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
      }
2
Oliver

私はまた、インポート文に簡単なタイプミスがあるウィンドウでこの問題に注意しました（リンティングはここに私を救った）：

import Enzyme from 'Enzyme';

のではなく

import Enzyme from 'enzyme';
0
Jeff Pirie