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

更多信息here。

<强>替代：

在package.json中，将jest的测试环境指定为"jsdom"，如下所示：

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

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

Answer 2

我建议你两件事可能会解决你的问题，首先，在每个描述中做mount，这背后的原因是你应该让每个测试彼此独立，所以除非你开始使用Rewire在你的beforeEach中，最好在干净的情况下开始每个测试。

作为另一个建议，也许你有更多的测试，但在这种情况下，由于你只测试组件已经安装并存在，你可以使用string html = string.Empty; string url = @"http://henn.worteus.eu/?tag=getdatas&token=21123&id=" + sessions; WebRequest req = WebRequest.Create(url); req.ContentType = "application/json"; WebResponse resp = req.GetResponse(); Stream stream = resp.GetResponseStream(); StreamReader re = new StreamReader(stream); string json = re.ReadToEnd(); // Wrapper w = (Wrapper)new JavaScriptSerializer().Deserialize(json, typeof(Wrapper)); Wrapper w = (Wrapper)JsonConvert.DeserializeObject(json, typeof(Wrapper)); dataGrid.ItemsSource = w.data;而不是public class Data { public string Skala { get; set; } public string Wert { get; set; } public string Bereich { get; set; } public string Interpretationen { get; set; } } public class Wrapper { public List<Data> data { get; set; } public string tag { get; set; } public object error { get; set; } }，这只会将组件安装在浅模式下，这将更快，但不会触发每个生命周期的反应事件。

您的最终代码应如下所示

shallow

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

您可能需要在提及时包含jsdom，请在此处查看相关帖子：Error: It looks like you called `mount()` without a global document being loaded

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

2 个答案: