Основная причина написания этого блога заключается в том, что я столкнулся с множеством ошибок при настройке среды тестирования в моем проекте React. Это проще, если вы используете CRA, но если проект настроен с использованием Webpack, это может вызвать у вас головную боль. Я не хочу, чтобы мои коллеги-разработчики столкнулись с той же проблемой.

Примечание. Эта статья не предназначена для настройки Webpack, Jest или Enzyme с нуля. Для этого я поделюсь ссылками на отличные статьи других людей. Это просто поможет разработчикам исправить ошибку, с которой они могут столкнуться при этом.

По сути, я столкнулся с двумя ошибками, на устранение которых потребовалось много времени:

  1. Jest обнаружил неожиданный токен
Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.     

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

Эта ошибка появилась, как только я запустил тесты с помощью Jest.

После долгой отладки я понял, что моя конфигурация в .babelrc была неправильной. То, что мне не хватало, было «preset-env». Для этого я установил @ babel / preset-env.

npm i -D @babel/preset-env

Затем я обновил файл .babelrc как:

{ 
  "presets": ["@babel/react", "@babel/env"]
}

Благодаря этому я смог успешно запустить тесты, используя:

npm run test

PS: Я уже модифицировал ключ «скриптов» под то же самое.

2. Время выполнения регенератора не определено

Это была вторая ошибка, с которой я столкнулся. Итак, мои тесты к настоящему времени работали нормально, но мое приложение начало ломаться. Как только я нажал на URL-адрес, я получил указанную выше ошибку.

Опять же, после долгой отладки и поиска в Google я узнал, что мне нужен был @ babel / polyfill.

Для установки просто запустите:

npm install --save @babel/polyfill

Да, это не зависимость от разработчика, это полифил.

После установки просто добавьте его в "entry" в webpack.config.js как:

entry: ['@babel/polyfill', './src/js/index.js'],

И это все. Благодаря этому, мое приложение и тесты теперь работают довольно гладко. Сообщите мне, смогли ли вы исправить и эти ошибки, если вы столкнулись с ними или столкнулись с новыми.

Ресурсы:



Настройте приложение React с помощью Webpack, Webpack Dev Server и Babel с нуля.
В этом блоге вы научитесь настраивать приложение React: medium.com





Тестирование React с помощью Jest и Enzyme I
В этой статье будет рассказано, как настроить и использовать Jest и Enzyme для тестирования приложения React, созданного с помощью Create React App… medium.com





Тестирование приложений React · Jest
В Facebook мы используем Jest для тестирования приложений React. Если вы новичок в React, мы рекомендуем использовать приложение Create React. Это… jestjs.io





Разработка React.js на основе тестов: модульное тестирование React.js с помощью Enzyme и Jest
По словам Майкла, любой фрагмент кода, не имеющий тестов, считается устаревшим кодом Перья. Поэтому один из… www.toptal.com