Настройка Enzyme 3.x Адаптер - PullRequest
Новая
       10

Настройка Enzyme 3.x Адаптер

0 голосов
/ 16 мая 2018

Я пишу тесты для приложения React с использованием Jest и Enzyme. В Enzyme 3.x представлены адаптеры для обеспечения совместимости между различными версиями React. В документации по установке приведены примеры, как это настроить: 

// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Что это за «установочный файл», указанный в комментарии? Это файл, который можно запустить перед всеми тестами? Куда этот файл добавляется в проект React? Нужно ли конкретное имя?

Ответы [ 6 ]

0 голосов
/ 13 августа 2019

Для фермента 3 нам нужен адаптер.Адаптер позволяет нам точно указать, какую версию реакции мы будем тестировать.Это позволяет уменьшить библиотеку основных ферментов.Не нужно иметь весь код для всех поддерживаемых версий реакции.Вместо этого вы просто указываете, какой из них вам нужен, устанавливая адаптер, который обеспечивает поддержку базовой библиотеки и делает весь ваш код более управляемым.

Вот как вы можете его настроить:

в каталоге тестов создайте любой файл .js:

tests / setupTest.js 

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

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

вВ корневом каталоге создайте файл jest.config.json и поместите его 

{
  "setupFiles": ["raf/polyfill", "<rootDir>/src/tests/setupTest.js"],
}

ПРИМЕЧАНИЕ. Нам также необходимо установить модуль полизаполнения.Polyfill известен как кадр анимации запроса.Так как у нас его нет в тестовой среде, нам нужно установить.

 npm i raf --save

наконец, в package.json: 

"test": "jest --config=jest.config.json"
0 голосов
/ 14 февраля 2019

У меня была такая же проблема, и самым простым решением было просто создать файл с именем setupTests.js в каталоге src/ с содержимым: 

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

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

Jest автоматически обнаруживает это, и ошибка исчезает.

0 голосов
/ 19 декабря 2018

Конфигурация Jest & фермента: Добавьте следующий код в package.json 

"jest": {
    "testEnvironment": "jsdom",
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
    "setupFiles": [
      "<rootDir>setup.js"
    ],
    "moduleFileExtensions": [
      "css",
      "scss",
      "js",
      "json",
      "jsx"
    ],
    "testRegex": "\/test\/spec\/.*\\.js$",
    "transformIgnorePatterns": [
      "/node_modules/(?!test-component).+\\.js$"
    ]
  }

Для настройки Enzyme => setup.js 

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

configure({ adapter: new Adapter() })

Для setupTestFrameworkScriptFile: setupTests.js global.fetch = require ('jest-fetch-mock') 

const { JSDOM } = require('jsdom')
const jsdom = new JSDOM('<!doctype html><html><body></body></html>')
const { window } = jsdom

const exposedProperties = ['window', 'navigator', 'document']
const { document } = new JSDOM('').window
global.document = document
global.window = document.defaultView
global.HTMLElement = window.HTMLElement
global.HTMLAnchorElement = window.HTMLAnchorElement

Object.keys(document.defaultView).forEach(property => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property)
    global[property] = document.defaultView[property]
  }
})

global.navigator = {
  userAgent: 'node.js',
}
0 голосов
/ 27 июня 2018

Что это за «установочный файл», указанный в комментарии? : Это способ запустить что-то перед началом теста (например, некоторые настройки)

Если вы создаете свой React Project, используя react-create-app, вам нужно или eject ваше приложение, или передаете команду для настройки вашего файла setupTest.js (имя не имеет значения), но вам нужно указать в командной строке, как это:

package.json 

"scripts": {
  "test": "react-scripts test --env=jsdom --setupFiles=./src/test-setup.js",
},

тест-setup.js 

import './shim';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

shim.js (это хак, чтобы избежать предупреждения) 

global.requestAnimationFrame = (callback) => {
    setTimeout(callback, 0);
};
0 голосов
/ 27 июня 2018

Enzyme имеет отличное руководство по настройке здесь: https://github.com/airbnb/enzyme/blob/master/docs/guides/jest.md

Хотя на начальном этапе не говорится, что это package.json.

Размещение соответствующих разделов (с некоторыми незначительными изменениями) здесь, чтобы мы не потеряли его:

Настройка с помощью Jest

Чтобы запустить файл установки для настройки Enzyme иАдаптер с Jest направляет setupTestFrameworkScriptFile буквально на строку <rootDir> и путь к файлу установки.

package.json: 

{
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>src/setupTests.js"
  }
}

Jest version 15и выше

Начиная с версии 15, Jest больше не выполняет макеты модулей по умолчанию .Из-за этого вам больше не нужно добавлять любую специальную конфигурацию для Jest, чтобы использовать его с энзимом.

Установите Jest и его интеграции с Babel, как рекомендовано в документах Jest.Установить фермент.Затем просто потребуйте / импортируйте React, функции фермента и ваш модуль вверху тестового файла.

setupTests.js: 

import React from 'react';
import { shallow, mount, render } from 'enzyme';

import Foo from '../Foo';
0 голосов
/ 27 июня 2018

Ему не нужно определенное имя, и да, оно запускается до начала каких-либо тестов.

Вы подключаете его в своем package.json jest разделе.

Это пример проекта, над которым я работаю. 

  "jest": {
    // other stuff...
    "setupFiles": [
      "./js/jest-setup.js"
    ],
    // ....
   }

Фактический файл js/jest-setup.js выглядит следующим образом (т.е. как ваш пример). 

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

Enzyme.configure({adapter: new Adapter()});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...