Тестирование React приложений
В Facebook мы используем Jest для тестирования React приложений.
Настройка
Настройка с Create React App
Если вы только знакомитесь с React, мы рекомендуем использовать Create React App. Он готов к использованию и поставляется вместе с Jest! Вам понадобится только добавить react-test-renderer
для рендеринга снимков.
Запуск
- npm
- Yarn
- pnpm
npm install --save-dev react-test-renderer
yarn add --dev react-test-renderer
pnpm add --save-dev react-test-renderer
Настройка без Create React App
Если у вас есть существующее приложение, то вам понадобится установить несколько пакетов, чтобы все хорошо работало в совместности. Мы используем пакет babel-jest
и Babel прежде для react
, чтобы преобразовать код внутри окружения для тестирования. Также см. использование Babel.
Запуск
- npm
- Yarn
- pnpm
npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer
yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer
pnpm add --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer
Ваш package.json
должен выглядеть примерно так (где <current-version>
это фактический номер последней версии зависимости). Пожалуйста, добавьте скрипты и конфигурационные записи для Jest:
{
"dependencies": {
"react": "<current-version>",
"react-dom": "<current-version>"
},
"devDependencies": {
"@babel/preset-env": "<current-version>",
"@babel/preset-react": "<current-version>",
"babel-jest": "<current-version>",
"jest": "<current-version>",
"react-test-renderer": "<current-version>"
},
"scripts": {
"test": "jest"
}
}
module.exports = {
presets: [
'@babel/preset-env',
['@babel/preset-react', {runtime: 'automatic'}],
],
};
И все готово!