Настройка AVA для тестирования браузера

August 22, 2021 · View on GitHub

Примечание от переводчика

Здесь содержится перевод файла browser-testing.md. Если при нажатии на ссылку, содержащую последние правки в master ветке AVA, Вы не можете найти файл browser-testing.md, то можете считать что перевод актуален.

Настройка AVA для тестирования браузера

Переводы: Français, Italiano, Русский

AVA не поддерживает запуск тестов в браузере, пока что. Некоторым библиотекам необходимы браузерное глобальное окружение(window, document, navigator, и т.д.). Один из примеров - это React, по крайней мере, если Вы собираетесь использовать ReactDOM.render и эмулировать DOM события с ReactTestUtils.

Этот пример работает с любыми библиотеками, которые моделируют браузерное окружение.

Установка jsdom

Установите jsdom.

JavaScript реализация WHATWG DOM и HTML стандартов, для использования с node.js

$ npm install --save-dev jsdom

Настройка jsdom

Создайте вспомогательный файл и поместите его в каталог 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 для подключения вспомогательного файла перед каждым тестовым файлом.

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