При обучении программированию большинство людей начинают использовать подход к разработке, основанный на поведении, который заключается в написании кода для соответствия функциональности или наблюдаемому поведению. Однако разработка, управляемая поведением, также называемая BDD, происходит от TDD или разработки, управляемой тестированием. TDD фокусируется на модулях программного обеспечения, где для этих модулей пишутся тесты, чтобы гарантировать, что модули работают должным образом. В React эти модули могут быть представлены компонентами, в которых написаны тесты для проверки того, что компонент ведет себя определенным образом, в противном случае он не прошел бы модульный тест.
Важности тестирования много. Например, он гарантирует, что изменения, внесенные в приложение в результате рефакторинга или новых функций, не повлияют отрицательно на существующее приложение. Реализация тестирования в React включает использование средства запуска тестов, которое представляет собой библиотеку, которая предоставляет код для тестирования, а также выполняет тесты. Кроме того, утилиты тестирования помогают TDD, обеспечивая имитацию приложения React, такую как монтаж компонента и проверка данных компонентов.
По умолчанию React включает библиотеку запуска тестов JEST в качестве зависимости приложения при запуске create-response-app. JEST предоставляет язык для написания исполняемых тестов для приложения React. React также использует утилиты тестирования, такие как Enzyme, которые позволяют писать тесты с использованием JEST таким образом, чтобы имитировать фактические компоненты и данные, за которые эти компоненты будут отвечать, без необходимости фактически с ними работать. Как уже упоминалось, для начала вам не нужно устанавливать библиотеку тестирования JEST, потому что она предустановлена вместе с create-react-app. После этого все, что необходимо установить, это следующее:
npm install --save enzyme react-test-renderer enzyme-adapter-react-16
Здесь мы устанавливаем энзим, который является утилитой тестирования, react-test-renderer, который является зависимостью для энзима, и пакет энзим-адаптер-react-16, который позволяет энзиму подключаться к React. Установив эти пакеты, вы можете приступить к написанию тестов. Во-первых, при тестировании компонентов вы можете создать файл с таким же именем, как у файла компонента, но с расширением файла .test.js.
// Main component src/components/Main/Main.js // unit test file src/components/Main/Main.test.js
После этого вам нужно импортировать несколько вещей из фермента и адаптера фермента, чтобы все работало правильно с приложением React. Так:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
Итак, выше вы, по сути, подключаете фермент к React и настраиваете его для работы с React через адаптер. Прежде чем вы начнете писать тесты, важно знать, что нужно тестировать. Некоторые предлагаемые приложения для модульного тестирования - это тестирующие компоненты, чтобы убедиться, что они отображают правильный вывод, такой как условные выходные данные или дочерние компоненты. Не следует тестировать сторонние библиотеки и их сложные соединения, такие как HTTP-запрос axios к API. После этого вы можете начать тестирование так:
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Main from './components/Main/Main;'
import SubMain from './components/SubMain/SubMain;'
configure({ adapter: new Adapter() });
describe('Main', () => {
it('it should render two SubMain elements', () => {
let wrapper = shallow(<Main />);
expect(wrapper.find(SubMain)).toHaveLength(2);
});
});
Давайте разберемся, что происходит на этот раз. Мы импортируем React, потому что собираемся работать с тестируемыми компонентами, такими как Main и SubMain, которые также импортируются. Затем из пакета энзима импортируется функция shallow, которая позволяет визуализировать компонент, который будет тестироваться, в данном случае Main. Кроме того, shallow создает «неглубокую» оболочку вокруг компонента, предотвращая загрузку его поддерева, такого как дочерние компоненты компонента и дочерние компоненты дочернего компонента и так далее.
После всего этого мы начинаем модульный тест с функции описания, которая представляет собой весь модульный тест. Он принимает два аргумента, первый из которых представляет собой строку, представляющую тестируемый компонент. Второй аргумент - это функция обратного вызова, которая будет содержать фактические тесты для компонента, выполняемые функцией it, которая также принимает два аргумента. Первый аргумент - это строковый оператор того, что ищет тест, поэтому в этом примере тестируется Main и он должен отображать два элемента SubMain. А второй аргумент - это обратный вызов, который содержит код, выполняющий тест. В этом примере мы сначала создаем поверхностное представление тестируемого компонента. По соглашению создается переменная, называемая оболочкой, которая назначается вызову поверхностной функции, передавая компонент Main в стандартной нотации JSX. Вы можете посмотреть документацию по ферменту, в которой подробно рассказывается об этой концепции поверхностного рендеринга компонента. Https://enzymejs.github.io/enzyme/docs/api/shallow.html
Затем мы используем функцию ожидания, которая предоставляется библиотекой JEST, чтобы проверить некоторые ожидания для поверхностного представления компонента Main. В этом случае, когда мы вызываем метод find в оболочке, проверяем, найден ли компонент SubMain в качестве его дочернего компонента. После этого мы не только ожидаем найти компонент SubMain, но и в результате этого вызова find создадим два компонента SubMain, найденных через toHaveLength (2). Также следует отметить, что при передаче компонента SubMain методу find мы не используем нотацию JSX, как это было при создании поверхностного представления компонента Main.
При этом вы написали простой тест для компонента, проверяющий, выполняет ли он свою работу по визуализации двух компонентов. Чтобы выполнить этот тест, вы просто запустите:
npm test
Документация JEST и Enzyme предоставляет дополнительную информацию, например о различных методах тестирования различных вещей и использовании дополнительных данных, таких как свойства и значения состояния. Но в целом это хорошее место для начала понимания того, что такое модульные тесты, когда и как их реализовать. Для получения дополнительной информации вы можете проверить эти ссылки.
