Не удалось найти файл декларации для фермента-адаптера-реакции-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, теперь я сталкиваюсь с двумя новыми проблемами.

error1 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';