如何使用 SWC、Jest、Eslint 和 Typescript 正确配置 NextJS 12.2？

Question

使用 VSCode 并且无法解决带有 Jest 文件的 next/babel 错误。 有什么建议么？

我将 NextJS 与 SWC 一起使用，并且在 my.eslintrc 文件中有 "extends": "next" 。

解析错误：找不到模块“next/babel”

下面是我的 package.json 文件。

{
...
  "dependencies": {
    "@emotion/cache": "^11.9.3",
    "@emotion/react": "^11.9.3",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.9.2",
    "next": "12.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@swc/core": "^1.2.220",
    "@swc/jest": "^0.2.22",
    "@testing-library/dom": "^8.16.0",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "14.3.0",
    "@types/node": "^18.6.3",
    "@types/react": "18.0.15",
    "@types/testing-library__jest-dom": "^5.14.5",
    "eslint": "8.20.0",
    "eslint-plugin-testing-library": "^5.6.0",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "next-transpile-modules": "9.0.0",
    "typescript": "^4.6.2"
}

Answer 1

问题是由文件类型/扩展名行为引起的。 将 Module.Exports 与 a.eslintrc.js 文件一起使用会导致问题。 转换为 json 格式的 .eslintrc 可以解决该错误。

// .eslintrc.js - Does not work

// Commented for testing
// do this module.exports = require("baseconfig/eslint-preset"); 

module.exports = {
    extends: ["prettier", "next/core-web-vitals"],
    plugins: ["testing-library"],
    settings: {
      next: {
        rootDir: ["apps/*/", "packages/*/"],
      },
    },
    rules: {
      "@next/next/no-html-link-for-pages": "off",
    },
    overrides: [
      // Only uses Testing Library lint rules in test files
      {
        "files": [
          "**/__tests__/**/*.[jt]s?(x)",
          "**/?(*.)+(spec|test).[jt]s?(x)"
        ],
        "extends": ["plugin:testing-library/react"]
      }
    ]
  };

// .eslintrc - works
{
    "extends": ["prettier", "next/core-web-vitals"],
    "plugins": ["testing-library"],
    "settings": {
      "next": {
        "rootDir": ["apps/*/", "packages/*/"],
      },
    },
    "rules": {
      "@next/next/no-html-link-for-pages": "off",
    },
    "overrides": [
      // Only uses Testing Library lint rules in test files
      {
        "files": [
          "**/__tests__/**/*.[jt]s?(x)",
          "**/?(*.)+(spec|test).[jt]s?(x)"
        ],
        "extends": ["plugin:testing-library/react"]
      }
    ]
  }

Answer 2

你创建了一个 jest.config.js 吗？ 这是来自官方 Next.js 文档https://nextjs.org/docs/testing#jest-and-react-testing-library

  transform: {
    '\\.[jt]sx?$': ['babel-jest', { presets: ['next/babel'] }],
  },