browser-testing.md

---

备注

这是 browser-testing.md 的简体中文翻译。这个链接 用来查看本翻译与 AVA 的 master 分支是否有差别（如果你没有看到browser-testing.md发生变化，那就意味着这份翻译文档是最新的）。

---

设置 AVA 做浏览器测试

翻译：Français, Italiano Русский, 简体中文

AVA 还不支持在浏览器中运行测试。一些库需要浏览器提供的全局变量（window, document, navigator等等）。 React 就是其中的一个例子，至少当你想用 ReactDOM.render 和用 ReactTestUTils 模拟事件。

这个秘方让需要模拟浏览器环境的库可以工作。

安装 browser-env

❗️ 重点提示

browser-env 将 jsdom 里浏览器环境上的属性添加到 Node.js 的全局环境。这是明确的违背了 jsdom 的推荐行为。请读完链接里的 wiki 页面并确保你明白了其中的注意事项。如果你只是需要一个并不包涵太多依赖的浏览器环境，那也许 window 是个更好的解决方案。

安装 browser-env。

使用 jsdom 模拟一个全局的浏览器环境。

$ npm install --save-dev browser-env

设置 browser-env

在 test/helpers 目录中创建一个 helper 文件。这样确保 AVA 不会把它当成测试来处理。

test/helpers/setup-browser-env.js:

import browserEnv from 'browser-env';
browserEnv();

配置测试使用 browser-env

配置 AVA，通过 require 那个 helper 文件使得每个测试运行前都加载它。

package.json:

{
  "ava": {
    "require": [
      "./test/helpers/setup-browser-env.js"
    ]
  }
}

享受！

编写你的测试并享受一个模拟的 window 对象吧。

test/my.dom.test.js:

import test from 'ava';

test('Insert to DOM', t => {
	const div = document.createElement('div');
	document.body.appendChild(div);

	t.is(document.querySelector('div'), div);
});

test/my.react.test.js:

import test from 'ava';
import React from 'react';
import {render} from 'react-dom';
import {Simulate} from 'react-addons-test-utils';
import sinon from 'sinon';
import CustomInput from './components/custom-input.jsx';

test('Input calls onBlur', t => {
	const onUserBlur = sinon.spy();
	const input = render(
		React.createElement(CustomInput, onUserBlur),
		div
	);

	Simulate.blur(input);

	t.true(onUserBlur.calledOnce);
});