Я нашел этот вопрос с тем же вопросом. Я нашел способ, как это сработает, что, я полагаю, и у вас уже есть, но с кем-то еще можно столкнуться:
Разъяснение терминов: можно провести интеграционное тестирование на реакцию с такими вещами, как Jest + энзим, с помощью mount (). Я отвечаю на это, основываясь на поиске сквозного / приемочного тестирования, где вы, по сути, тестируете свой продукт с точки зрения пользователя (здесь, переходя по веб-сайту).
Поскольку это с точки зрения пользователя, я считаю не имеет значения, что вы используете React.
Итак, как это сделать? Есть много вариантов тестирования JS . Этот ресурс может помочь понять, какой пакет тестирования вы можете выбрать. Вы хотите что-то, что имитирует реальный браузер.
При изучении некоторых параметров, перечисленных в приведенном выше ресурсе, я обнаружил, что:
edit: Изначально я предложил использовать кошмар. Однако при выполнении нескольких тестов у меня было несколько странное поведение (неожиданные тайм-ауты, экземпляры Electron не закрывались должным образом), и я исследовал некоторые другие варианты. Но я сохраню информацию для справки:
Я выбрал кошмар , потому что он рекламировался как простой.
Ниже приведен пример теста с использованием Jest и nightmare (и некоторого небрежного TypeScript). На сайте есть кнопка для завершения хода игрока, а также есть заголовок, который указывает, чей это ход. Я буду имитировать нажатие этой кнопки и следить за тем, чтобы заголовок изменялся, как ожидалось. Также обратите внимание, что во время этих тестов вам понадобится ваш dev-сервер и интерфейс.
import * as Nightmare from 'nightmare';
let nightmare1: Nightmare;
let nightmare2: Nightmare;
beforeEach(async () => {
nightmare1 = new Nightmare({ show: true })
nightmare2 = new Nightmare({ show: true })
await nightmare1
.goto('http://127.0.0.1:3000');
await nightmare2
.goto('http://127.0.0.1:3000');
});
afterEach(async () => {
await nightmare1.end();
await nightmare2.end();
});
it('sockets turn changes via End Turn button', async () => {
expect.assertions(6);
// Both display the same player's turn ("Red's Turn")
const startingTurnIndicator1 = await nightmare1
.evaluate(() => document.querySelector('h1').innerText);
const startingTurnIndicator2 = await nightmare2
.evaluate(() => document.querySelector('h1').innerText);
expect(startingTurnIndicator1).toBe(startingTurnIndicator2);
// Both change ("Blue's Turn")
const oneClickTI1 = await nightmare1
.click('button')
.evaluate(() => document.querySelector('h1').innerText)
const oneClickTI2 = await nightmare2
.evaluate(() => document.querySelector('h1').innerText);
expect(oneClickTI1).toBe(oneClickTI2);
expect(oneClickTI1).not.toBe(startingTurnIndicator1);
// Both change back ("Red's Turn")
const twoClickTI2 = await nightmare2
.click('button')
.evaluate(() => document.querySelector('h1').innerText)
const twoClickTI1 = await nightmare1
.evaluate(() => document.querySelector('h1').innerText);
expect(twoClickTI1).toBe(twoClickTI2);
expect(twoClickTI1).toBe(startingTurnIndicator2);
expect(twoClickTI1).not.toBe(oneClickTI1);
});
Я не уверен, насколько хорошо фактический код в этом тесте, но он работает.