网站搜索

reactjs - 使用 Jest 测试由 projen 创建的 React 库


我已经建立了一个项目来开发一个 React 包(以后通过 NPM 发布)。为此,我正在使用 projen。

由于该库是一个带有 hooks 的 React 库,我将 .projenrc.ts 配置文件设置如下

import { typescript } from 'projen';
import { NpmAccess, TypeScriptJsxMode } from 'projen/lib/javascript';

const project = new typescript.TypeScriptProject({
  defaultReleaseBranch: 'main',
  name: 'NAME',
  projenrcTs: true,
  releaseToNpm: true,

  // Npm publishing
  npmAccess: NpmAccess.PUBLIC,
  packageName: 'PACKAGE-NAME',
  peerDeps: [
    'react@^16.8.0 || ^17.0.0 || ^18.0.0',
    'react-dom@^16.8.0 || ^17.0.0 || ^18.0.0',
  ],

  /* Dependencies */
  devDeps: [
    'react@^18.2.0',
    'react-dom@^18.2.0',
    '@types/react',
    '@types/react-dom',
  ],

  /* Extending tsconfig to accept .tsx files and JSX */
  tsconfig: {
    compilerOptions: {
      jsx: TypeScriptJsxMode.REACT_JSX,
    },
    include: ['src/**/*.tsx'],
  },
  tsconfigDev: {
    compilerOptions: {
      jsx: TypeScriptJsxMode.REACT_JSX,
    },
    include: ['src/**/*.tsx'],
  },

});

project.synth();

我可以将它编译并在另一个 React 项目中使用,毫无问题。当涉及到测试时,如果我运行 npx projen test,我会收到以下错误

 Cannot find module 'react/jsx-runtime' from 'src/react/context/MyContext.tsx'

看起来在启动 jest 测试时,React 没有正确安装。由于我不想把 React 放在我的依赖中,而最多放在开发依赖中,有什么建议可以让我运行涉及导入 React 的 .tsx 文件的测试吗?

仅供参考,这是由 projen 在 package.json 中自动生成的 Jest 部分

{
  ...
  "jest": {
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.ts?(x)",
      "<rootDir>/(test|src)/**/*(*.)@(spec|test).ts?(x)"
    ],
    "clearMocks": true,
    "collectCoverage": true,
    "coverageReporters": [
      "json",
      "lcov",
      "clover",
      "cobertura",
      "text"
    ],
    "coverageDirectory": "coverage",
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "watchPathIgnorePatterns": [
      "/node_modules/"
    ],
    "reporters": [
      "default",
      [
        "jest-junit",
        {
          "outputDirectory": "test-reports"
        }
      ]
    ],
    "preset": "ts-jest",
    "globals": {
      "ts-jest": {
        "tsconfig": "tsconfig.dev.json"
      }
    }
  },
  ...
}