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

Question

Я создал новое приложение React с помощью create-реагировать-приложение, и я хотел написать модульный тест для компонента с именем "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 test

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

Enzyme Internal Error: Enzyme ожидает, что адаптер будет настроен, но не нашел ни одного. Чтобы настроить адаптер, вы должны позвонить Enzyme.configure({ > adapter: new Adapter() })

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

Answer 1

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

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

Answer 2

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

Добавить:

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

configure({ adapter: new Adapter() })

Answer 3

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

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

jest.config.js

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

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

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

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

Answer 4

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

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

Answer 5

Используя последнюю версию библиотек, я сталкивался с той же ошибкой, о которой сообщалось в каждом ответе на этот вопрос. Ошибка: 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 : Как я обнаружил в Фермент: TypeError: Адаптер не является конструктором , проблема в том, что мы не можем " import '' модуль с экспортом по умолчанию". Правильный способ настройки вашего файла:

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

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

Именно так и вы можете протестировать свои компоненты.

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

Answer 6

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

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

Обновление:

Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.

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

Answer 7

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

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

Таким образом: (импорт * как Адаптер из ...) возвращает сообщение «Ошибка типа: Адаптер не является конструктором.»

Answer 8

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

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

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

Answer 9

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

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

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

Answer 10

Добавьте import React from 'react'; в начало вашего файла.

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