使用“@”导入进行笑话测试

Question

我正在尝试运行测试我使用 @import 的反应应用程序，例如

import { something } from "@atoms";

我在 tsconfig.json 文件中进行了映射，当我运行应用程序（命令：“webpack serve --port 9004”）时它被正确使用，但是当我尝试测试时（命令“cross-env BABEL_ENV=test jest”）导入失败并出现此错误：

Configuration error:

    Could not locate module @atoms mapped as:
    [
      "src/components/atoms/index"
    ].

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/@atoms/": "[
          "src/components/atoms/index"
        ]"
      },
      "resolver": undefined
    }

      1 | import { ReactElement } from "react";
      2 | 
    > 3 | import { Something } from "@atoms";
        | ^
      4 | 
      5 |
      6 | export const SomethingElse = ({

      at createNoMappedModuleFoundError (../node_modules/jest-resolve/build/resolver.js:579:17)
      at Object.<anonymous> (components/molecules/SomethingElse/index.tsx:3:1)

jest.config.js:

const { compilerOptions } = require("./tsconfig.json");

module.exports = {
  rootDir: "src",
  testEnvironment: "jsdom",
  transform: {
    "^.+\.(j|t)sx?$": "babel-jest",
  },
  moduleNameMapper: {
    "\.(sass)$": "identity-obj-proxy",
    "single-spa-react/parcel": "single-spa-react/lib/cjs/parcel.cjs",
    ...compilerOptions.paths,
  },
  setupFilesAfterEnv: ["@testing-library/jest-dom"],
};

tsconfig.json:

{
  "extends": "ts-config-single-spa",
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "ES5",
    "baseUrl": ".",
    "paths": {
      "@app/*": ["src/*"],
      "@configs/*": ["src/configs/*"],
      "@configs": ["src/configs/index"],
      "@components/*": ["src/components/*"],
      "@components": ["src/components/index"],
      "@constants/*": ["src/constants/*"],
      "@constants": ["src/constants/index"],
      "@enums/*": ["src/enums/*"],
      "@enums": ["src/enums/index"],
      "@hooks/*": ["src/hooks/*"],
      "@hooks": ["src/hooks/index"],
      "@services/*": ["src/services/*"],
      "@services": ["src/services/index"],
      "@store/*": ["src/store/*"],
      "@store": ["src/store/index"],
      "@themes/*": ["src/themes/*"],
      "@themes": ["src/themes/index"],
      "@utils/*": ["src/utils/*"],
      "@utils": ["src/utils/index"],
      "@types/*": ["src/types/*"],
      "@types": ["src/types/index"],
      "@assets/*": ["public/assets/*"],
      "@atoms": ["src/components/atoms/index"],
      "@molecules": ["src/components/molecules/index"],
      "@organisms": ["src/components/organisms/index"],
      "@pages": ["src/components/organisms/pages/index"]
    }
  },
  "files": ["src/main-file.tsx"],
  "include": ["src/**/*"]
}

Answer 1

我使用 tsconfig-paths-jest npm 包来添加它以使用来自 tsconfig.json 的路径。

要将它添加到我的 Jest 设置中，我在 jest 配置脚本文件 (.js) 中有这个

const tsconfig = require('./tsconfig.json');
const moduleNameMapper = require('tsconfig-paths-jest')(tsconfig);

module.exports = {
    moduleNameMapper,
    ...
};

使用“@”导入进行笑话测试

Using '@' import for jest testing

testing

mapping

import

reactjs

jestjs