Question

我正在使用Jest和Enzyme为React应用程序编写测试。 Enzyme 3.x引入了适配器，以提供不同版本的React的兼容性。 The installation documentation举例说明如何进行设置：

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

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

评论中提到的这个“设置文件”是什么？这是一个可以在所有测试之前运行的文件吗？这个文件在React项目中的位置是什么？它需要一个特定的名字吗？

Answer 1

它不需要特定的名称，是的，它可以在任何测试之前运行。

您将其连接到package.json的{{1}}节中。

这是我正在研究的项目中的一个示例。

jest

实际的"jest": { // other stuff... "setupFiles": [ "./js/jest-setup.js" ], // .... }文件如下所示（即您的示例）。

js/jest-setup.js

Answer 2

酶在这里对设置有一个很好的指导：https://github.com/airbnb/enzyme/blob/master/docs/guides/jest.md

尽管第一步没有说它是package.json。

在此处发布相关部分（进行一些细微调整），这样我们就不会丢失它：

使用Jest配置

要运行安装文件以配置Jest直接将setupTestFrameworkScriptFile的酶和适配器配置为字符串<rootDir>和安装文件的路径。

package.json：

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

Jest版本15及更高版本

从版本15开始，Jest no longer mocks modules by default。因此，您不再需要为Jest添加任何特殊配置以将其与酶一起使用。

按照Jest docs中的建议安装Jest及其Babel集成。安装酶。然后，只需要/导入React，酶功能以及您的模块在测试文件的顶部即可。

setupTests.js：

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

import Foo from '../Foo';

Answer 3

注释中提到的“设置文件”是什么？：这是在测试开始之前运行某些东西的一种方式（例如一些配置）

如果您使用react-create-app创建React Project，则需要或eject您的应用程序，或者通过命令来设置文件setupTest.js（名称无关紧要），但是您需要在您的命令行中进行标识，如下所示：

package.json

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

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

Answer 4

笑话和酵素配置：在 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$"
    ]
  }

用于设置酶=> 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',
}

Answer 5

我遇到了同样的问题，最简单的解决方案是在setupTests.js目录中简单地创建一个名为src/的文件，内容如下：

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

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

Jest自动检测到它，错误消失了。

Answer 6

对于酶3，我们需要一个适配器。 Adapter允许我们确切指定要针对哪个版本的反应。这使得核心酶文库较小。它不需要具有所支持的所有各种版本的React的所有代码。相反，您只需通过安装适配器来指定所需的适配器，该适配器可使核心库保持轻巧，并使整个代码库更易于管理。

这是您如何配置它：

在测试目录中创建任何.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模块。 Polyfill被称为请求动画帧。由于我们在测试环境中没有它，因此需要安装。

 npm i raf --save

最终在package.json中：

"test": "jest --config=jest.config.json"

配置Enzyme 3.x适配器

6 个答案:

使用Jest配置

Jest版本15及更高版本

package.json

test-setup.js

shim.js（这是一种避免警告的技巧）