Фермент ожидает, что адаптер будет настроен

Я создал новое приложение React от приложения create-react-app, и я хотел написать unit тест для компонента с именем "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});
});

Я также добавил файл в папку 'src' с именем 'setupTests.js' с содержимым:

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

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

Я запустил его:

испытание npm

и я получил ошибку:

Внутренняя ошибка фермента: фермент ожидает, что адаптер будет настроен, но не найден. Чтобы настроить адаптер, вы должны вызвать Enzyme.configure({ > adapter: new Adapter() })

Вы знаете, что может решить эту проблему?

Ответ 1

Добавьте его в файл теста.

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

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

Ответ 2

Кроме того, если вы не хотите импортировать файл setupTests.js в каждый тестовый файл, вы можете поместить его в папку package.json:

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

Обновление:

Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.

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

Ответ 3

Файл "setupTests" должен быть импортирован в тестовый файл:

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

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

Ответ 4

Как сказал Приянк, если вы используете приложение Create React, оно выберет конфигурацию из src/setupTests.js.

Добавлять:

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

configure({ adapter: new Adapter() })

Ответ 5

Вам нужно использовать импорт следующим образом:

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

Таким образом: (import * as Adapter from...) возвращает сообщение "TypeError: Adapter не является конструктором".

Ответ 6

Многие ответы говорят, что импортируйте setupTests.js в ваш тестовый файл. Или настройте ферментный адаптер в каждом тестовом файле. Который решает насущную проблему.

Но в долгосрочной перспективе, если вы добавите файл jest.config.js в корень проекта. Вы можете настроить его для запуска установочного файла при запуске.

jest.config.js

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

Это говорит Jest запускать setupTest.ts при каждом запуске.

Таким образом, если вам нужно добавить полифилы или добавить глобальный макет, такой как localstorage, вы можете добавить его в файл setupTests и настроить его везде.

Документы Enzyme не охватывают интеграцию с Jest, поэтому смешивать эти две вещи сбивает с толку.

Ответ 7

Добавить import React from 'react'; в верхней части файла.

Вы используете синтаксис JSX <MessageBox app={app}/>, который транслируется в React.createComponent(...). Чтобы это работало, переменная React должна быть определена в объеме файла.

Ответ 8

Попробуйте что-то вроде этого;

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

Ответ 9

Используя последнюю версию библиотек, я сталкивался с той же ошибкой, о которой сообщалось в каждом ответе на этот вопрос. Ошибка: TypeError: Адаптер не является конструктором.

Я сгруппировал все необходимые шаги, чтобы правильно протестировать ваш компонент ReactJS с помощью Enzyme (я использовал 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 не является конструктором, проблема в том, что мы не можем " импортировать " модуль с экспортом по умолчанию. Правильный способ настройки вашего файла:

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

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

Только это и вам хорошо, чтобы проверить свои компоненты.

Приветствия и надеюсь, что это помогает.

Ответ 10

Для всех, кто прочтет это в будущем, setupTestFrameworkScriptFile устарела в пользу setupFilesAfterEnv в документации, в новых версиях. Мы можем добавить наш файл так:

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

Ответ 11

Для того, чтобы я использовал при использовании React с create-react-app, мне нужно было убедиться, что у меня правильное имя файла. Файл должен быть src/setupTests.js с s в конце Tests.

Внутри setupTests.js есть следующее:

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

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

При запуске npm run test он автоматически находит файл setupTests.js. Нет необходимости импортировать его в каждый тестовый файл.