Документы по ферментам великолепны, но могут несколько сбивать с толку. В этом сообщении в блоге будет пример настройки с использованием указанного выше стека и ссылка на мой репозиторий «Примеры».
В моем репозитории примеров есть все, что вам нужно, чтобы начать использовать React, Redux, Node, Webpack и Enzyme. В нем есть базовые примеры, которые переходят к более сложным примерам, чтобы вы могли лучше понять, как все работает:
Https://github.com/colinlmcdonald/react-redux-webpack
Введение
Enzyme - это абстракция библиотеки react-addons-test-utils, предоставленная командой React Facebook. Как и test-utils, он предоставляет несколько API для различных типов рендеринга - мелкого, монтируемого и статического; а также для обхода и управления DOM - find, simulate, setState и т. д.
Expect - это легкая библиотека для тестирования. Он предоставляет утверждения, аналогичные библиотеке expect в chai. Например, вместо .to.deep.equal Expect имеет .toEqual.
Если вам действительно нужно смонтировать какой-либо из ваших компонентов, вам нужно будет использовать автономный браузер. В этом примере я использую JSDOM, как это рекомендовано и используется командой Facebook. Монтирование компонентов полезно, если вам нужно протестировать дочерние компоненты или если вам нужно протестировать определенные методы жизненного цикла, такие как componentDidMount. Это может показаться очевидным, но сначала для меня это не было очевидным.
Начать:
Предполагается, что у вас уже установлены все ваши пакеты babel. Если нет, проверьте мой пример репо для полной настройки.
Я устанавливаю sinon, чтобы показать, как следить за успешным выполнением componentDidMount, но это не обязательно для многих сценариев тестирования.
npm install --save-dev mocha Enhancement React-addons-test-utils jsdom expect sinon
Webpack
Если вы используете веб-пакет, вам нужно указать ему, чтобы он игнорировал следующее:
JSDOM
Это настройка нашего безголового браузера:
Мокко / Package.json
Мы включим следующий скрипт в наш package.json для запуска Mocha. Он компилирует наши файлы с помощью babel, сначала запускает наш установочный файл, а затем запускает наши тесты.
Компонент
Вот компонент, который мы будем тестировать. Обратите внимание, что мы не отображаем наш компонент в DOM из этого файла. Я импортировал этот компонент в другой файл и визуализирую его из этого файла (например, импортирую компонент Profile в index.js и визуализирую его в DOM).
Если вы оставите рендеринг, скорее всего, вы получите сообщение об ошибке, что целевой элемент DOM не может быть найден.
Контрольная работа
Мы импортируем наш компонент, следим за его методом componentDidMount и тестируем его, чтобы убедиться, что он был вызван.
Вывод
Запустите npm test, чтобы запустить тесты, и все! Любые вопросы, не стесняйтесь оставлять комментарии.
