Skip to content

Latest commit

 

History

History
81 lines (55 loc) · 2.48 KB

browser-testing.md

File metadata and controls

81 lines (55 loc) · 2.48 KB

备注

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

设置 AVA 做浏览器测试

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

AVA还 不支持在浏览器中运行测试。一些库要求浏览器指定全局变量（window, document, navigator等等）。 React 就是其中的一个例子，最低要求如果你想用 ReactDOM.render 和用 ReactTestUTils 模拟事件。

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

安装 jsdom

安装 jsdom。

一个 WHATWG DOM 和 HTML 标准的 JavaScript 实现，给 node.js 使用的。

$ npm install --save-dev jsdom

设置 jsdom

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

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

global.document = require('jsdom').jsdom('<body></body>');
global.window = document.defaultView;
global.navigator = window.navigator;

配置测试使用 jsdom

配置 AVA，将require设置为 helper 文件，这样每个测试运行前都会先加载它。

package.json:

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

享受！

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

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