Покрытие кода Cypress для удаленных приложений CRA

Cypress/Покрытие кода — React

Покрытие кода Cypress для удаленных приложений CRA

Краткая конфигурация для создания подробных отчетов о покрытии вашего удаленного приложения React.

Эта статья основана на моем предыдущем руководстве по настройке покрытия кода с использованием Cypress в приложении Create-React-App (CRA). Если вы новичок в этой теме, я рекомендую прочитать начальный пост, прежде чем продолжить:

В этой статье мы рассмотрим, как настроить отчеты о покрытии кода для сквозных тестов Cypress (E2E) в удаленном приложении Create-React-App. Чтобы продолжить, вы можете использовать стартовый код, доступный в ветке starter_code репозитория.

Инструментирование выброшенного приложения Create-React-App:

Create-React-App — отличная отправная точка для проектов, поскольку оно внутренне обрабатывает и абстрагирует общую конфигурацию и шаблонный код. Однако в сценариях, где требуются более сложные конфигурации или настройки, вы можете удалить приложение. Извлечение обеспечивает доступ ко всем конфигурациям, сохраняя при этом функциональность приложения. В нашем случае нам нужно было создать сборки разработки для более низких сред, которые не поддерживаются CRA изначально из соображений безопасности. Поэтому мы решили удалить наше приложение.

Когда мы извлекаем проект Create-React-App, мы получаем доступ и контроль над всеми конфигурациями, включая настройку покрытия кода. Теперь мы несем ответственность за добавление соответствующей конфигурации в инструментарий нашего кода, когда необходимо создавать отчеты о покрытии.

Шаги настройки:

Чтобы настроить покрытие кода для удаленного приложения Create-React-App, выполните следующие действия:

1. Установите библиотеку babel-plugin-istanbul с помощью этой команды:

npm install -D babel-plugin-istanbul

2. В файл webpack.config.js включите плагин babel-plugin-istanbul, чтобы включить инструментирование во время транспиляции.

3. Для большего контроля можно условно включить процесс инструментирования. Добавьте флаг, например --coverage, к аргументам командной строки. Это позволяет избежать ненужных накладных расходов и потенциальных проблем с производительностью.

Мы добавим эти 2 строки

const isCoverageEnabled = process.argv.includes("--coverage");

isCoverageEnabled && require.resolve("babel-plugin-istanbul")
// Line 99
const isCoverageEnabled = process.argv.includes("--coverage");
...
// Line 408
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    presets: [
      [
        require.resolve('babel-preset-react-app'),
        {
          runtime: hasJsxRuntime ? 'automatic' : 'classic',
        },
      ],
    ],
    
    plugins: [
      isEnvDevelopment &&
        shouldUseReactRefresh &&
        require.resolve('react-refresh/babel'),
        isCoverageEnabled && require.resolve("babel-plugin-istanbul"),
    ].filter(Boolean),
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
    // See #6846 for context on why cacheCompression is disabled
    cacheCompression: false,
    compact: isEnvProduction,
  },
},
...

Необходимые изменения кода в файле `webpack.config.js` можно найти в этом Gist.

4. Обновите стартовый скрипт package.json, включив в него флаг покрытия:

"start": node scripts/start.js --coverage

После выполнения этих шагов ваше приложение React будет инструментироваться всякий раз, когда будет передан флаг --coverage. Этот инструментированный код можно использовать при тестировании для создания отчетов о покрытии кода.

Вы можете получить доступ к последней версии кода в ветке master репозитория:

Благодарим вас за прочтение этой статьи о расширении покрытия кода для удаленных приложений Create-React-App. Если у вас есть какие-либо вопросы или комментарии, пожалуйста, оставьте их ниже.

Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.