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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обновлять:

Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.

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

Попробуй вот так;

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

Используя последнюю версию библиотек, я столкнулся с той же ошибкой, о которой сообщалось в каждом ответе на этот вопрос. Ошибка: 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 Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Только это, и вы можете протестировать свои компоненты.

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

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

Добавлять:

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

configure({ adapter: new Adapter() })

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

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

jest.config.js

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

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

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

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

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

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

Для меня при использовании 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. Нет необходимости импортировать его в каждый тестовый файл.

Я столкнулся с той же ошибкой, и по какой-то причине React не получал файл setupTests.js автоматически.

Я создал новый файл с именем jest.config.js в корневом каталоге и добавил

{ "jest": { "setupTestFrameworkScriptFile": "<rootDir>/path/to/your/file.js", } }

После этого ошибка исчезла.

Примечание: Позже я удаленный файл jest.config.js, но он все еще работает сейчас.

Не уверен, что на самом деле было причиной проблемы!

Конфигурация файла должна быть в свойстве setupFilesAfterEnvjest.config.js.

{
  ...
  setupFilesAfterEnv: ["<rootDir>/jest.transform.js"],
  ...
}

Если кто-то сталкивается с этим при попытке исправить это после настройки Testing React Components с помощью Jest в GatsbyJs (https://www.gatsbyjs.org/docs/testing-react-components/)

В сделанном вами setup-test-env.js отредактируйте его так:

import "@testing-library/jest-dom/extend-expect"
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

Создайте файл с именем setupTests.js в корне вашего проекта. jest будет автоматически искать этот файл перед запуском любых тестовых костюмов. Добавьте в файл следующее содержимое.

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

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

Примечание: имя файла должно быть точно таким же. Нет необходимости импортировать этот файл setupTests.js в ваши тестовые файлы. Он будет работать автоматически

Тем, кто использует VS Code и расширение Jest Runner для приложения React CRA, не забудьте настроить Jest Runner, чтобы использовать встроенный скрипт runner CRA, задав для команды jest значение:

npm test - --watchAll = false

Вы получите сообщение об ошибке в теме, если забудете это сделать. И поскольку вы используете CRA, вы не сможете настроить setupFilesAfterEnv ни в package.json, ни в jest.config.js. Попытка этого приведет к этой ошибке:

Эти параметры в вашей конфигурации package.json Jest в настоящее время не поддерживаются приложением Create React.

1. npm i enzyme-adapter-react-16 enzyme-to-json --save-dev

2. Добавить в package.jsonвведите описание изображения здесь

"jest": {
       "collectCoverageFrom": [  "src/**/*.js", "!src/index.js" ]
};

3. Добавьте два файла в папку src ->

• setupTests.js

• tempPolyfills.js

4. setupTests.js:

import requestAnimationFrame from './tempPolyfills';

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

        configure({adapter: new Adapter(), disableLifecycleMethods:true});

5. tempPolyfills.js:

const requestAnimationFrame = global.requestAnimationFrame = callback => {
          setTimeout(callback,0);
      };
export default requestAnimationFrame;

6. в случае, если shallow -> expect () не работает в тестовом примере, используйте toJson (): Пример :

    import { shallow } from "enzyme";
    import App from "./App";
    import toJson from 'enzyme-to-json';
    describe('App', () => {
        const app = shallow(<App />);
        it('renders correctly', () => {
            expect(toJson(app)).toMatchSnapshot();
        });
     });

Если вы думаете, что в остальном настроили все правильно (например, у вас установлена ​​поддержка @ wojtekmaj / энзим-адаптера-реакции-17 для поддержки React 17), еще одна ошибка, которую нужно проверить с помощью Typescript:

У тебя есть

"esModuleInterop": true,

и соответствующий формат импорта для адаптера?

import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import Enzyme from 'enzyme';