2

我正在使用 Enzyme 测试反应组件，但出现以下错误：

不变违规：dangerouslyRenderMarkup(...)：无法在工作线程中呈现标记。在单元测试时需要 React 或使用 ReactDOMServer.renderToString 进行服务器渲染之前，请确保window并在全局范围内可用document

在需要“酶”之前，我为 jsdom 添加了以下设置（正如我在几个地方读到的）：

const baseMarkup = '<!DOCTYPE html><html><head><title></title></head><body></body></html>';
const window = require('jsdom').jsdom(baseMarkup).defaultView;

global.window = window;
global.document = window.document;
global.navigator = window.navigator;

const React = require('react');
const {mount} = require('enzyme');
const sinon = require('sinon');
const SortableInput = require('../../../src/components/sortableInput/sortableInput').default;

我在这里做错了什么？

编辑

我认为这与服务器端渲染无关。该消息是关于单元测试和服务器端渲染的一般信息。

4

3 回答 3

3

回答我自己的问题，以防有人遇到同样的问题。这最终对我有用：

import 'jsdom-global/register';

describe('My awesome component test', () => {
  let cleanup;

  beforeEach(() => cleanup = require('jsdom-global')());

  afterEach(() => cleanup());

  ....
})
于 2016-11-13T12:43:01.970 回答
1

在我的一个项目中，这是初始化 JSDOM 的代码，它运行良好。

import { jsdom } from 'jsdom';

before(() => {
  global.document = jsdom('');
  global.window = document.defaultView;
});

before() 是 Mocha 的根钩子。它在所有测试开始之前运行。

于 2016-09-11T15:00:08.353 回答
0

同样错误的另一个不那么明显的原因是describeWithDOMEnzyme 的方法：

describeWithDOM('<Slider />', () => {
   describe('render', () => {
     it('should render the slider with one handle by default', () => {
     // and so on

根据酶指南，现在最好避免这种方法：

在以前的酶版本中，有一个公共的 describeWithDOM API，它在每次测试之前将一个新的 JSDOM 文档加载到全局命名空间中，确保测试是确定性的并且没有副作用。

不再推荐这种方法。React 的源代码对其运行的环境做了几个假设，其中之一是在“需要时间”找到的 global.document 将是它唯一需要担心的文档。结果，这种类型的“重新加载”最终导致的痛苦超过了它所阻止的痛苦。

然而，重要的是要确保您使用全局 DOM API 的测试没有泄漏的副作用，这可能会改变其他测试的结果。在有更好的选择之前，这留给您确保。

于 2016-12-10T21:31:02.993 回答