如何使用 Next.js 中的 SWC（而不是 babel）来检测 Cypress 中的代码？

Question

我将Cypress集成到我的项目中进行测试，一切都很顺利。然而，当我想要进行代码覆盖率时，我找不到解决我的问题的方法。

在 Next.js 13 中，它不支持

.babelrc

，但支持 SWC，但是 Istanbul 需要

.babelrc

作为配置！

请阅读此GitHub 讨论。

如果我配置

.babelrc

并运行我的赛普拉斯测试和构建脚本：

  "cypress-open-component": "cypress open --component",

  "cypress-open-e2e": "npm run instrument && cypress open --e2e",

  "cypress-run-component": "npm run instrument && cypress run --component --spec src/components/core/*/*.cy.tsx --headless",

  "instrument": "npx nyc instrument --compact=false src  instrumented",

  "coverage-report": "npx nyc report --reporter=html"

  "build": "mv .babelrc.js .babel_ && next build; mv .babel_ .babelrc.js",

  "start": "next start",

  "lint": "next lint",

它们工作得很好。

但是，当我跑步时

npm run dev

：

"dev": "next dev",

我收到错误：

 info Using external babel configuration from /home/alaeddine/Desktop/gersthofen-app/.babelrc.js
- error ./src/app/layout.tsx:2:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict
<w> [webpack.cache.PackFileCacheStrategy] Restoring pack failed from /home/alaeddine/Desktop/gersthofen-app/.next/cache/webpack/client-development-fallback.pack.gz: Error: incorrect header check
- wait compiling /_error (client and server)...
- error ./src/app/layout.tsx:2:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict

对于构建脚本，我使用了解决方案，但我认为这是一个棘手的解决方案。

两种选择

如果我将

.babelrc.js

更改为

.babelrc.build.js

，

npm run dev

效果很好，因为它忽略了 Babel 文件，但 Cypress 文件失败了：

npm run cypress-run-component

(Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        12.17.3                                                                        │
  │ Browser:        Electron 106 (headless)                                                        │
  │ Node Version:   v18.15.0 (/home/alaeddine/.nvm/versions/node/v18.15.0/bin/node)                │
  │ Specs:          1 found (indexButton.cy.tsx)                                                   │
  │ Searched:       src/components/core/Button/indexButton.cy.tsx                                  │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  indexButton.cy.tsx                                                              (1 of 1)
17 assets
65 modules

ERROR in ./src/components/core/Button/index.tsx:14:1
Syntax error: Unexpected token, expected ","

  12 |   loading,
  13 |   icon,
> 14 | }: IButtonProps) => {
     |  ^
  15 |   const {
  16 |     button,
  17 |     primary,

client (webpack 5.86.0) compiled with 1 error in 6654 ms


  1) An uncaught error was detected outside of a test

请问如何使用 Cypress 在 Next.js 13 中实现代码覆盖率？

文件cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
      webpackConfig: {
        mode: "development",
        devtool: false,
        module: {
          rules: [
            // application and Cypress files are bundled like React components
            // and instrumented using the babel-plugin-istanbul
            // (we will filter the code coverage for non-application files later)
            {
              test: /\.tsx$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader",
                options: {
                  presets: ["@babel/preset-env", "@babel/preset-react"],
                  plugins: [
                    // we could optionally insert this plugin
                    // only if the code coverage flag is on
                    "istanbul",
                  ],
                },
              },
            },
          ],
        },
      },
    },
    // Instrument the code
    setupNodeEvents(on, config) {
      require("@cypress/code-coverage/task")(on, config);

      return config;
    },
  },

  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
  video: false,
});

文件next.config.ts

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    if (process.env.NODE_ENV === "development") {
      return [
        {
          source: "/components",
          destination: "/page",
        },
      ];
    }

    return [];
  },
};

module.exports = nextConfig;

Answer 1

https://github.com/kwonoj/swc-plugin-coverage-instrument

您可以使用SWC的伊斯坦布尔港口；然而，这个问题在我看来非常重要：https://github.com/kwonoj/swc-plugin-coverage-instrument/issues/197

或者，您可以使用 babel，但仅适用于

process.env.NODE_ENV === 'test';

（请参阅我可以在构建过程中获取 Next.Js 来排除 .babelrc 吗？）

Answer 2

我建议使用 swc-plugin-coverage-instrument。

1. 创建覆盖范围。我建议遵循Cypress 文档。忽略 Babel 指令。设置@cypress/code-coverage。当你测试运行时，它应该说明一些关于覆盖率的信息。该图像位于文档中。

2. 工具您的代码。我建议使用 swc-plugin-coverage-instrument。所以步骤是：

   yarn add --dev swc-plugin-coverage-instrument
   
   next.config.js
     experimental: {
       swcPlugins: [["swc-plugin-coverage-instrument", {}]],
     },
   

   // Launch Next.js
   server yarn run dev
   // Launch Cypress
   npx cypress open
   Run Tests
   Open Coverage report at coverage/lcov-report/index.html
   

   它甚至可以与应用程序路由器一起使用，只需进行一些调整这里。

这里有一些例子。