Не удалось найти файл декларации для фермента-адаптера-реакции-16?
Я использую Enzyme для тестирования компонентов в приложении React в течение некоторого времени. После обновления пакетов в первый раз за несколько недель я начал получать ошибку из своих тестов.
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, теперь я сталкиваюсь с двумя новыми проблемами.
![error2]()
Чтобы прояснить изображения, первая ошибка TS7016 заключается в том, что для enzyme-adapter-react-16
нет никаких типов, а вторая ошибка TS2339 говорит, что enzyme
не имеет свойства configure
.
Я относительно не знаком с TypeScript, поэтому мне нужна помощь. Я пытался установить типы для enzyme-adapter-react-16
, но они, похоже, не существуют.
Должен ли я попытаться добавить их самостоятельно, или есть ли способ избежать этой проблемы?
Также интересно, как появилась эта ошибка. Мне раньше не нужен адаптер, почему сейчас?
Ответы
Ответ 1
Должен ли я попытаться добавить их самостоятельно, или есть ли способ избежать этой проблемы?
Я считаю, что вы правы, что в настоящее время нет типов для enzyme-adapter-react-16
- это довольно новый, так что казалось бы, что никто еще не создал.
Вы можете создать их самостоятельно, и если бы вы подумали, что они были четко определены, вы могли бы внести их в DefinitelyTyped для других пользователей, Чтобы "избежать" проблемы, вы можете получить TypeScript, чтобы игнорировать тот факт, что у нее нет информации о типе.
Чтобы игнорировать ошибки типа:
-
Для первой ошибки сообщение об ошибке пытается помочь с добавлением нового файла декларации (.d.ts)... ". Таким образом, вы можете создать файл (обычно я помещаю его в папку под названием" /types "), называемую чем-то вроде enzymeAdapter.d.ts
, и создавать содержимое declare module 'enzyme-adapter-react-16';
(из сообщения об ошибке). В основном это означает, что TypeScript просто обрабатывает импортированный объект как тип any
(т.е. Не проверяет тип).
-
Для второй ошибки вы можете указать enzyme
import в 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() });
Также интересно, как появилась эта ошибка. Мне раньше не нужен адаптер, почему сейчас?
Это новый выбор дизайна из проекта enzyme
для версии 3 - вы можете прочитать подробности об основных изменениях из версии 2.x здесь. Я думаю, что подход адаптера заключается в том, чтобы упростить и согласовать различные требования для поддержки различных версий реагирования.
Ответ 2
Если вы используете React 16+ и удалили приложение, добавьте следующие пакеты:
yarn add enzyme react-test-renderer enzyme-adapter-react-16 --dev
Затем вы должны настроить Enzyme, создав файл src/setupTests.js. Добавь это:
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
До: до скриншота
После: после скриншота
Я думаю, что мы все можем согласиться с тем, что зеленый - прекрасный цвет !!
Ответ 3
У меня ушло слишком много времени, чтобы решить. Надеюсь, это поможет кому-то:
Использование Create-React-App 2.1.3 с энзимом 3.8.0, энзим-адаптер-реакция-16: 1.7.1, энзим-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"]
}
Ответ 4
Я также отметил эту проблему на Windows с простой опечаткой в моем операторе импорта (linting спас меня здесь):
import Enzyme from 'Enzyme';
скорее, чем
import Enzyme from 'enzyme';