Question

我尝试使用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.

当我尝试包含反应成分时出现问题：

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并设置我的浏览器env：

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'
};

Answer 1

JSDom可以使用html模板而且我没有提供一个模板，所以显然React.render并不知道将我的应用程序渲染到哪个元素。

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

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!");
  }
);

从网址中提取模板，或者：

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。

使用Mocha进行React测试时不变违规

1 个答案: