使用Mocha进行React测试时的不变量冲突

Invariant violation with React testing using Mocha

本文关键字：不变量 冲突 测试 Mocha 进行 React 使用      更新时间：2023-09-26

我正在尝试使用Electron建立一个React项目，我刚刚开始尝试配置Mocha作为我的测试框架。

如果我跑，一切都很好:

  "test": "mocha -w --require babel-core/register --require ignore-styles ./app/test/helpers/browser.js ./app/**/*.spec.js --colors --growl"

和我的spec文件只有一个简单的描述和断言1等于1。

当我尝试包含react组件时，问题出现了:

import style from './app.scss';
import React from 'react';
import {render} from 'react-dom';
export default class App extends React.Component {
  render () {
    return (
      <div>
        <h1 className={style.title}> Hello World </h1>
      </div>
    )
  }
}
render(<App/>, document.getElementById('app'));

在我的测试中包含它时，甚至在浅挂载它之前，我得到:

不变量违规:_registerComponent(…):目标容器不是DOM元素。

我正在使用jsdom并设置浏览器环境，如:

import { jsdom } from 'jsdom'
const exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);
    global[property] = document.defaultView[property];
  }
});
global.navigator = {
  userAgent: 'node.js'
};

JSDom可以使用html模板，而我显然没有提供React模板。渲染不知道渲染到什么元素

设置JSDom时，您可以提供一个配置对象到jsdom.env，或者在我的情况下，我只是提供了一个html模板到jsom():

global.document = jsdom("<!doctype html><html><body><div id='app'></div></body></html>");

根据文档，你也可以这样设置:

jsdom.env(
  "https://iojs.org/dist/",
  ["http://code.jquery.com/jquery.js"],
  function (err, window) {
    console.log("there have been", window.$("a").length - 4, "io.js releases!");
  }
);

从url中提取模板，或者:

var jsdom = require("jsdom");
jsdom.env(
  '<p><a class="the-link" href="https://github.com/tmpvar/jsdom">jsdom!</a></p>',
  ["http://code.jquery.com/jquery.js"],
  function (err, window) {
    console.log("contents of a.the-link:", window.$("a.the-link").text());
  }
);

使用静态HTML

它还提供了一个不那么冗长的方法，我使用的就是:

var jsdom = require("jsdom").jsdom;
var doc = jsdom(markup, options);
var window = doc.defaultView;

其中标记就是一些HTML。

相关文章：