反应测试错误:看起来你没有加载全局文档就调用了`mount()`

Question

index.spec.js文件:

import React from 'react';
import { mount } from 'enzyme';
import Header from './';
import { expect } from 'chai';

describe('header component', () => {
  let renderedOutput;
  beforeEach(() => {
    renderedOutput = mount(<Header />)
  })

  describe('initial state', () => {
    it('renders the header', () => {
      expect(renderedOutput).to.exist();
    });
    it('renders the header', () => {
      expect(renderedOutput).to.be.present();
    });
  })
});

运行规范,它失败了: Error: It looks like you called mount() without a global document being loaded.

我读过一些关于jsdom的内容,但不知道为什么要添加它.有谁解释我做错了什么？

Answer 1

由于酶的mount API需要DOM,因此如果您尚未在浏览器环境(即Node环境)中使用mount,则需要使用JSDOM.

为了获得酶的最佳体验,建议您在首次要求React之前将文档加载到全局范围.在运行React代码之前运行以下脚本非常重要.

npm install --save-dev --save-exact jsdom jsdom-global

然后 :

`import 'jsdom-global/register';` //at the top of file , even  , before importing react

更多信息在这里.

另类:

在您的中package.json,为jest指定测试环境,"jsdom"如下所示:

  "jest": {
    "testEnvironment": "jsdom"
  }

我遇到了同样的问题,对我来说效果很好.

Answer 2

我会向您推荐两件事，这可能会解决您的问题，首先，在每个描述中进行安装，其背后的原因是您应该使每个测试彼此独立，所以除非您开始在 beforeEach 中使用 Rewire ，最好在干净的情况下开始每次测试。

作为另一个建议，也许您有更多的测试，但在这种情况下，由于您只是测试组件是否已安装并存在，您可以使用shallow而不是mount，并且只会以浅模式安装组件，这会更快，但不会触发react的每一个生命周期事件。

您的最终代码应如下所示

import React from 'react';
import { shallow } from 'enzyme';
import Header from './';
import { expect } from 'chai';

describe('header component', () => {
  describe('initial state', () => {
    it('renders the header', () => {
      const renderedOutput = shallow(<Header />)
      expect(renderedOutput).to.exist();
    });
    it('renders the header', () => {
      const renderedOutput = shallow(<Header />)
      expect(renderedOutput).to.be.present();
    });
  })
});

让我知道这对您是否有意义，更重要的是，如果它有效的话。

此外，您可能需要包含您提到的 jsdom，请参阅此处的相关帖子：错误：看起来您在没有加载全局文档的情况下调用了 `mount()`