Skip to content

Latest commit

 

History

History
73 lines (51 loc) · 2.03 KB

browser-testing.md

File metadata and controls

73 lines (51 loc) · 2.03 KB
Raw

Setting up AVA for browser testing

Translations: Français, Italiano, Русский, 简体中文

AVA does not support running tests in browsers yet. Some libraries require browser specific globals (window, document, navigator, etc). An example of this is React, at least if you want to use ReactDOM.render and simulate events with ReactTestUtils.

This recipe works for any library that needs a mocked browser environment.

Install jsdom

Install jsdom.

A JavaScript implementation of the WHATWG DOM and HTML standards, for use with node.js

$ npm install --save-dev jsdom

Setup jsdom

Create a helper file and place it in the test/helpers folder. This ensures AVA does not treat it as a test.

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

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

Configure tests to use jsdom

Configure AVA to require the helper before every test file.

package.json:

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

Enjoy!

Write your tests and enjoy a mocked window object.

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