Автор оригинала: FreeCodeCamp Community Member.
Энтони Нг
В этом руководстве мы узнаем, как писать тесты для компонентов реагирования.
Сохраняя вещи простыми, мы получим WebPack.config.js и файл package.json, который мы все еще можем понять.
Почему я рекомендую проверить тестирование
Что такое большая сделка о разработке тестов (TDD)? На TDD много замечательных статей и книг, но вот некоторые преимущества, которые я вижу из него:
Пособие № 1: Вы создаете лучший код.
Когда вы сначала пишете тесты, вы сохраняете свой код, ориентированный на то, что вы делаете.
Я был в ситуациях, где я код по совпадению. Я постоянно пишу код, пока он не работает … Предполагая, что я помню, что была цель моего кода.
TDD будет держать вас на треке и вырезать жир из вашего кода.
Пособие № 2: Вы создаете более чистый код.
Когда у вас есть хорошо разработанные тесты, которые проходят, вы знаете, что вы можете безопасно рефакторировать. Сколько раз вы использовали свой рабочий код, только чтобы все сломать?
TDD дает вам жизненные признаки вашего кода и предупреждает вас, когда что-то не так. Это эффективный способ поймать регрессии в вашем коде.
Пособие № 3: Это весело.
Создание кода является длительным, тяжелым процессом. Может принять вас время, чтобы увидеть прогресс в вашем проекте.
TDD дает вам мгновенную обратную связь, которую вы идете в правильном направлении. Увидев, что ваши тесты Pass дает вам крошечные победы и делает кодирование (для меня, по крайней мере) намного более приятным.
Обратите внимание, что TDD не исключительно о модульных тестах. Мне нравится думать о TDD в качестве мышления, где вы создаете чистый, сжатый и целенаправленный код. Агрегаты – это просто побочный эффект TDD.
Инструменты мы будем использовать
Компоненты реагирования тестирования относительно просты, потому что компоненты реагирования являются чистыми функциями. Когда у вас есть компоненты без гражданских/презентаций, это просто функции, которые должны вернуть тот же результат, учитывая определенные входы.
Моча
Для этого учебника мы будем использовать Mocha. Обязательно загружайте это глобально, чтобы вы могли запускать Mocha из вашей командной строки.
$ npm install -g mocha
Мы добавим сценарий в наш Package.json, чтобы запустить наши тесты. Обратите внимание на дополнительные флаги, которые мы используем для запуска MOCHA из нашей командной строки.
— watch // Mocha will watch our source and test files and automatically rerun tests when the files change. — compilers // We will use Babel to compile our ES6/JSX code in our tests. — require // We will be running our "test_helper.js" file before our tests start. Our "test_helper.js" file will set up a fake DOM environment in Node.js that we will need to test our React components.
Чай
Chai – это библиотека утверждения, которая поможет нам написать наши тесты в то, что читает больше, как английский.
// Instead of our tests reading as..assert.equal(2 + 1, 3);
// …using Chai we can write…expect(2 + 1).to.equal(3);
jsdom.
JSDOD – это реализация JavaScript DOM и HTML, которую мы можем использовать в Node.js.
Когда мы проверяем наши компоненты реагирования, мы рассмотрим их до DOM. Node.js не приходит с DOM, так что вот входит JSDOD: он устанавливает для нас поддельную среду браузера.
Исходный код
У нас есть три компонента для тестирования:
1. Предмет TODO, который отображает текст. 2. Тодолист, который отображает список компонентов TODO. 3. Компонент TodoInput, который имеет поле ввода и кнопку. Этот компонент вызывает обратный вызов при нажатии кнопки.
Давайте получим тестирование.
Тесты для пробега
Кстати, вы можете увидеть полные тестовые файлы в Github Отказ
1. Компонент Todo. Что мы хотим проверить?
С помощью этого компонента мы проверим, вы сможете увидеть, отображается ли тег
Мы будем использовать «React-Addons-Test-Utils» из команды RACT в наших тестах. Он предоставляет нам функцию «RenderIntodocument», чтобы сделать наш компонент TODO в нашу поддельную DOM:
const component = renderIntoDocument();
«React-Addons-Test-Utils» также дает нам некоторые инструменты для прохождения нашего DOM. Первый мы посмотрим на «FindrederedMomComponentWithClass», который будет искать наш компонент для одного элемента с классом «TODO»:
const todo = findRenderedDOMComponentWithClass(component, 'todo');expect(todo).to.be.ok;
Теперь давайте проверим, что текстовый контент – это то, что мы ожидаем, что это будет:
const todoText = todo.textContent;expect(todoText).to.equal('Walk dog');Давайте перейдем к тодолисту.
2. Тололистский компонент. Что мы хотим проверить?
Давайте убедитесь, что мы получаем компонент Todo для каждого Todo.
Во-первых, мы создадим тодолистский компонент и пройти через три предмета Todo. Мы ожидаем, что будут созданы три компонента Todo.
Давайте использовать другой метод от реагирования «ScrildedComponentsWithType», чтобы просмотреть наш компонент и найти какие-либо дочерние компоненты, тип которого имеет данный класс RACT.
const todosEle = scryRenderedComponentsWithType(component, Todo);expect(todosEle.length).to.equal(3);
3. TodoInput компонент. Что мы хотим проверить?
Мы хотим проверить, если входное поле и кнопка правильно отображаются на DOM.
React Utils предоставляет нам метод «FindredrededMomComponentwithTag», который ищет один элемент с данным HTML-тегом.
const inputField = findRenderedDOMComponentWithTag(component, 'input');const button = findRenderedDOMComponentWithTag(component, 'button');
expect(inputField).to.be.ok;expect(button).to.be.ok;
Теперь мы хотим проверить, будет ли кнопка запустить наш метод обратного вызова.
Вот где приятно иметь нестандартные компоненты. Мы можем издеваться от реквизитов нашего компонента и проверять, что компонент работает.
let addTodoInvoked = false;let addTodo = (todo) => { addTodoInvoked = todo };const component = renderIntoDocument( Мы передаем функцию «Addtodo» в качестве обратного вызова к компоненту TodoInput. Всякий раз, когда вызывается обратный вызов, он должен обновить переменную «AddtoDoinVoxed» с текстом внутри поля ввода.
Вам может быть интересно, как мы собираемся нажать эту кнопку, чтобы проверить, был ли запущен обратный вызов. Опять же, React-Utils имеет метод, «симулировать», чтобы помочь нам. «Simulate» делает то, что звучит так, как он имитирует действия DOM (например, «щелчок») для нас.
Сначала давайте введем значение в текстовое поле. Мы делаем это, обновляя значение самого поля ввода, а затем используя Simulate.Change для обновления значения в DOM:
inputField.value = 'Mow lawn';Simulate.change(inputField);
Затем мы будем использовать Simulate.cick, чтобы нажать кнопку:
Simulate.click(button);
Наш тест должен проверить, что обратный вызов был запущен:
expect(addTodoInvoked).to.equal('Mow lawn');И вот и это – мы только что тестировали компоненты бездействия реагирования. Теперь это более простым, чтобы настроить тесты и издеваться на любые обратные вызовы, поскольку мы сохраняем наши функции чистыми.
Тестирование редукторов
Если мы хотели использовать Redux, мы могли бы тестировать редукторы аналогичным образом, поскольку они также просто чистые функции.
Это на самом деле даже проще, чем тестирование компонентов реагирования, поскольку состояния – это просто типы данных Vanilla JavaScript. Нам не нужны дополнительные утилиты, такие как мы сделали для компонентов реагирования.
Допустим, у нас есть редуктор в нашем проекте, как ниже:
const initialState = [];
const reducer = (state = initialState, action) => { let newTodos;switch(action.type) { case 'ADD_TODO': newTodos = state.slice(); newTodos.push(action.data); return newTodos; default: return state; };};Чтобы проверить это, мы должны заглушить начальное состояние и действие. Пример теста будет выглядеть следующим образом:
const initialState = ['Mow lawn'];cons action = { type: 'ADD_TODO', data: 'Walk Dog'};const nextState = reducer(initialState, action);expect(nextState).to.deep.equal(['Mow lawn', 'Walk Dog']);
Тестирование ajax.
Работа с вызовами AJAX – еще одна общая функциональность, которую вы можете захотеть проверить.
Я рекомендую использовать «Axios» для ваших потребностей AJAX. Axios – это клиент HTTP, который вы можете использовать в браузере или с Node.js. Это означает, что вы получите последовательную API, независимо от того, где вы делаете свои звонки AJAX.
Базовый запрос на получение Axios будет выглядеть так:
axios.get('myUrl');Есть разные подходы к тестированию этого. Для этого урока мы будем использовать «Sinon», библиотеку тестирования, которая дает нам много функций утилиты тестирования. Это похоже на то, что предоставляется реагирование-тестовые утилизаторы.
Мы посмотрим на метод под названием «stub», который даст нам увидеть информацию о методе, например, как было названо метод.
Наш код, чтобы проверить, что мы используем Axios, чтобы сделать запрос, будет выглядеть так:
// stub on the axios.get() method to see how many times it was calledsinon.stub(axios, 'get');
// make a request using axios.get()utility.makeAjax();
// expect that axios.get() was called onceexpect(axios.get.callCount).to.equal(1);
Синон дает нам много функциональных возможностей, в том числе шпионов, издевателей и создание поддельных XMLHTTPREQUESS и поддельных серверов.
Когда вы начинаете, будьте осведомлены о том, где вы запускаете свои тесты (браузер против Node.js). Если вы управляете тестами в Node.js (например, мы сделали в этом руководстве), отметим, что у вас не будет доступа к XMLHTTTTPREQUEST и другие объекты браузера, потому что … ну … вы не в браузере.
Некоторые функции синона ожидают среды браузера. Если это так, вы можете рассмотреть вопрос о проведении тестов через браузер.
Вы также можете посмотреть на Карма Чтобы запустить ваши тесты через беговый браузер через вашу командную строку.
Есть какие-либо вопросы? Вы тестируете по-другому? Не стесняйтесь комментировать ниже.
Проверьте некоторые из моих других статей о тестировании.
Тестирование состояния реактивного компонента