使用 Enzyme 与 JSDOM

JSDOM 是一个基于 JavaScript 的无头浏览器，可用于创建逼真的测试环境。

由于 enzyme 的 mount API 需要 DOM，因此如果您不在浏览器环境（例如 Node 环境）中，则需要 JSDOM 才能使用 mount。

为了获得最佳的 enzyme 体验，建议您在第一次加载 React 之前将文档加载到全局作用域中。非常重要的是，以下脚本必须在运行 React 代码之前运行。

因此，像下面这样的独立脚本通常是一个好方法

jsdom v10~:

/* setup.js */

const { JSDOM } = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target),
  });
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
global.requestAnimationFrame = function (callback) {
  return setTimeout(callback, 0);
};
global.cancelAnimationFrame = function (id) {
  clearTimeout(id);
};
copyProps(window, global);

以下也是 jsdom 旧 API 的示例。

jsdom ~<v10:

/* setup.js */

const { jsdom } = require('jsdom');

global.document = jsdom('');
global.window = document.defaultView;
global.navigator = {
  userAgent: 'node.js',
};

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter((prop) => typeof target[prop] === 'undefined')
    .reduce((result, prop) => ({
      ...result,
      [prop]: Object.getOwnPropertyDescriptor(src, prop),
    }), {});
  Object.defineProperties(target, props);
}
copyProps(document.defaultView, global);

`describeWithDOM` API 以及在每次测试后清除文档

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

这种方法不再推荐。React 的源代码对它运行的环境做出了几个假设，其中之一是它在“require 时间”找到的 global.document 将是它唯一需要担心的文档。因此，这种类型的“重新加载”最终会导致比它阻止的更多问题。

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

JSDOM + Mocha

在使用 JSDOM 进行测试时，上面的 setup.js 文件需要在测试套件运行之前运行。如果您使用的是 mocha，则可以使用 --require 选项从命令行执行此操作

mocha --require setup.js --recursive path/to/test/dir

Node.js 兼容性

Jsdom 需要 node 4 或更高版本。因此，如果您想将其与 mount 一起使用，则需要确保您的机器上安装了 node 4 或 iojs。如果您必须使用旧版本的 Node，您可能想尝试使用基于浏览器的测试运行器，例如 Karma。

在 Node 版本之间切换

有时您可能需要在不同版本的 Node 之间切换，您可以使用名为 nvm 的 CLI 工具快速切换 Node 版本。

要安装 nvm，请使用来自 http://nvm.sh 的 curl 脚本，然后

nvm install 4

现在您的机器将运行 Node 4。您可以使用 nvm use 命令在两个环境之间切换

nvm use 0.12

nvm use 4

使用 Enzyme 与 JSDOM

describeWithDOM API 以及在每次测试后清除文档

JSDOM + Mocha

Node.js 兼容性

在 Node 版本之间切换

`describeWithDOM` API 以及在每次测试后清除文档