在管道作业上运行 cypress 代码覆盖率

Question

所以我决定将 Sonarqube 集成到一个项目中，现在我想向它发送我的 cypress e2e 测试的覆盖率报告。

我有一个带有 cypress e2e 测试的 Vite React 应用程序，为了添加覆盖率报告，我使用 nyc、vite-plugin-istanbul 和 @cypress/code-coverage。 当我在本地运行测试时，会生成报告并且看起来是正确的，但是当我在管道作业上运行测试时，测试会运行并通过，但不会创建覆盖范围。

这是我的 .gitlab-ci.yml 文件中运行测试的作业：

e2e-tests:
  image: 
    name: node:20.9.0
    entrypoint: ['']
  stage: e2e-test
  only:
    - merge_requests
    - main
  variables:
    # Change to true to run on QA environment
    CI: 'false'
  before_script:
    - apt-get update -qq && apt-get install -y
    - apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
  script:
    - export NODE_ENV=test
    - yarn cypress install --force
    - yarn install
    - yarn test:ci-e2e-server
  artifacts:
    paths:
      - e2e-coverage/

这是我用来运行测试的脚本：

 "test:ci-e2e-server": "start-server-and-test start http://localhost:5173 'cypress run'",

这里我使用 start-server-and-test 包在管道上创建一个服务器，以便在本地主机上启动我的服务器并运行我的测试。

这是我的 vite.config.ts 文件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';
import istanbul from 'vite-plugin-istanbul';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    istanbul({
      extension: ['.js', '.ts', '.jsx', '.tsx'],
      requireEnv: false,
      nycrcPath: './.nycrc.json',
      cypress: true,
    }),
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              fileName: false,
            },
          ],
        ],
      },
    }),
    eslint(),
  ],
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],
  },
  server: {
    host: true,
  },
});

这是我的 .nycrc.json 上的配置：

{
  "extends": "@istanbuljs/nyc-config-typescript",
  "all": true,
  "check-coverage": false,
  "include": "src/*",
  "exclude": [
    "cypress/**",
    "coverage/**",
    "instrumented/**",
    "backstop/**",
    "unit-coverage/**",
    "e2e-coverage/**",
    "node_modules",
    ".nyc_output"
  ],
  "report-dir": "e2e-coverage",
  "reporter": ["lcov"]
}

在我的 next.config.ts 上，我的 e2e 对象上有这个 setupNodeEvents 函数：

async setupNodeEvents(
      on: Cypress.PluginEvents,
      config: Cypress.PluginConfigOptions,
    ): Promise<Cypress.PluginConfigOptions> {
      coverageTask(on, config);
      // https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/quick-start.md
      await addCucumberPreprocessorPlugin(on, config);

      on(
        'file:preprocessor',
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        }),
      );

      return config;
    },

我的 sonar-project.properties 上也有这些属性

    sonar.sources=src, cypress
    sonar.tests=src, cypress
    sonar.test.inclusions=**/*.test.ts, **/*.test.tsx
    sonar.javascript.lcov.reportPaths=**/lcov.info

我在工作中得到的信息是：

找不到覆盖文件/builds/ahresp-ppec-e2r/e2r-area-reservada/.nyc_output/out.json 跳过覆盖率报告

附加信息：

• 当我在本地运行服务器时，我会在控制台上看到窗口。coverage。
• 我不知道我是否在管道中创建的服务器上得到了它。

Answer 1

所以，如果有人也遇到这个问题，这就是我为解决这个问题所做的事情。

首先我添加了一个 .env.test 文件，并将 VITE_NODE_ENV 变量设置为测试。

然后在我的工作中我将其更新为：

e2e-tests:
  image: 
    name: node:20.9.0
    entrypoint: ['']
  stage: e2e-test
  only:
    - development
    - main
  variables:
    # Change to true to run on QA api
    CI: 'false'
  script:
    - export VITE_NODE_ENV=test
    - apt-get update -qq && apt-get install -y
    - apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
    - yarn cypress install --force
    - yarn install
    - yarn test:ci-e2e-server
  artifacts:
    paths:
      - e2e-coverage/

我创建了一个新脚本以在测试模式下启动服务器：

"start:test": "vite --mode test",

我还更新了测试：ci-e2e-server 脚本：

"test:ci-e2e-server": "start-server-and-test start:test 5173 'cypress run'",

为了完成我的配置，我获得了 VITE_NODE_ENV 变量并在测试时启用覆盖范围。

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';
import istanbul from 'vite-plugin-istanbul';

// https://vitejs.dev/config/
export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    plugins: [
      istanbul({
        extension: ['.js', '.ts', '.jsx', '.tsx'],
        requireEnv: process.env.VITE_NODE_ENV !== 'test', // Set to true to enable coverage
        nycrcPath: './.nycrc.json',
        cypress: true,
      }),
      react({
        babel: {
          plugins: [
            [
              'babel-plugin-styled-components',
              {
                displayName: true,
                fileName: false,
              },
            ],
          ],
        },
      }),
      eslint(),
    ],
    resolve: {
      alias: [{ find: '@', replacement: '/src' }],
    },
    server: {
      host: true,
    },
  });
};