Как правило, легко протестировать простую функцию javascript, подобную приведенной ниже, которая не имеет доступа к DOM:

function sum(numberOne, numberTwo) {
  return numberOne + numberTwo;
}

Я собираюсь провести базовую демонстрацию тестирования другой функции, которая выполняет запись в DOM. Он будет по-прежнему основан на функции калькулятора, описанной выше, но на этот раз он возвращает ответ и вставляет в DOM. Посредством тестирования мы убедимся, что DOM получает ответ. Живая демонстрация проекта, над которым мы будем работать, а также репозиторий на github, приведены ниже:

Живая демонстрация → https://bit.ly/39L0BOA

Репозиторий Github → https://github.com/shloch/DOM_testing_tutorial

Этот небольшой проект построен на ES6, управляется с помощью Webpack (читайте, как настроить здесь), тестирование проводится с помощью Jest.

В моей папке «src /» 3 файла:

function sum(numberOne, numberTwo) {  
  return numberOne + numberTwo;
} 
export default sum;
  • displayAnswer.js
    (собирает данные формы, вычисляет сумму и отображает ответ в DOM внутри тега HTML с id = уведомлением. Это что мы будем в основном тестировать)
import sum from './calculator'; 
const displayAnswer = () => { 
  const notification = document.querySelector("#notification");            
  const numberOne = +document.querySelector("#numberOne").value;  
  const numberTwo = +document.querySelector("#numberTwo").value;
const answer = sum(numberOne, numberTwo); 
  notification.innerHTML = `The sum is = ${answer}`;   

} 
export default displayAnswer;

просто содержит кнопку отправки (#addBtn) с прослушивателем событий, ожидающим нажатия перед началом добавления. Это также файл точки входа для веб-пакета;)

import displayAnswer from './displayAnswer';
const addBtn = document.querySelector("#addBtn");
addBtn.addEventListener("click", displayAnswer);

Получилась тестовая папка с одним тестовым файлом:

  • Calculator.test.js
import displayAnswer from '../src/displayAnswer';
import sum from '../src/calculator';
beforeEach(() => {
document.body.innerHTML = `
  <div id="calculator">
    <h3 id="notification"></h3>
    <input type="number" value="5" name="numberOne" id="numberOne" />
    +
    <input type="number" value="3" name="numberTwo" id="numberTwo" />
    <button id="addBtn">GET ANSWER</button>
  </div>`;
});
//-----test1---------------
test('Ensure SUM function works', () => {
 expect(sum(2, 3)).toBe(5);
  expect(sum(10, 1)).toBe(11);
  expect(sum(-2, 6)).toBe(4);
});
//------test2--------------
describe('Testing that Result displays in DOM', () => {
  test('Check answer Notification', () => {
    const notification = document.querySelector('#notification');
    displayAnswer();
    expect(notification.innerHTML).toEqual("The sum is = 8");
  });
});

Клон DOM копируется в тестовый файл

Обратите внимание, что beforeEach () тестового файла содержит копию структуры DOM. Помните, что наш тестовый файл запускается через консоль, поэтому у него не будет доступа к браузеру. Таким образом, мы воспроизведем структуру DOM нашего HTML-файла (Нажмите здесь, чтобы увидеть исходный HTML-файл) .

Также обратите внимание, что входные данные (функции beforeEach () ) предварительно загружены значениями (5 и 3). . Поэтому мы ожидаем, что в DOM отобразится текст:

«Сумма = 8»

Таким образом, перед запуском каждого из следующих тестов (test1 + test2) структура DOM будет воспроизведена.

test1 ← - это проверка простой функции javascript файла Calculator.js.

test2 ← - это проверка суммы, отображаемой в DOM (наша виртуальная DOM должна быть уточнена) после вызова функции displayAnswer () из файл displayAnswer.js.

Запуск теста:

Не забудьте посетить репозиторий Github, чтобы увидеть всю структуру папок проекта.

Вам необходимо клонировать проект локально, установить пакеты npm, запустить webpack и открыть файл в браузере. Вы также можете просто протестировать живую демонстрацию выше :)

Команда для запуска теста:

npm run test

Результат испытаний:

Надеюсь, это поможет более чем одному человеку;)