javascript - React-testing-Library with Jest 无法解析 CRACO 别名

Question

在我的 React 应用程序中，我使用 craco 的别名来组织我的组件和导入

//craco.config.js
const path = require("path");
const alias = require("./src/config/aliases");

const SRC = "./src";
const aliases = alias(SRC);

const resolvedAliases = Object.fromEntries(
  Object.entries(aliases).map(([key, value]) => [
    key,
    path.resolve(__dirname, value),
  ])
);

module.exports = {
  webpack: {
    alias: resolvedAliases,
  },
};  

使用定义的别名:

//aliases.js
const aliases = (prefix = "src") => ({
  "@components": `${prefix}/components`,
  "@UI": `${prefix}/components/UI`,
  "@config": `${prefix}/config`,
  "@assets": `${prefix}/assets`,
  "@utils": `${prefix}/utils`,
  "@SVGs": `${prefix}/assets/SVGs`,
  "@services": `${prefix}/services`,
  "@hooks": `${prefix}/hooks`,
});

module.exports = aliases;

现在，如果我尝试运行简单的 App.test.jsx

import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
  render(<App />);
});

我收到以下错误:

Cannot find module '@components/layout/HeadNav' from 'src/App.jsx'  

因为导入 import HeadNav from "@components/layout/HeadNav"; 无法解析。

我尝试将解析别名添加到我的 jest.config.js 但出现相同的错误。

//jest.config.js
const path = require("path");
const alias = require("./src/config/aliases");

const SRC = "./src";
const aliases = alias(SRC);

const resolvedAliases = Object.fromEntries(
  Object.entries(aliases).map(([key, value]) => [
    key,
    path.resolve(__dirname, value),
  ])
);

module.exports = {
  verbose: true,
  resolve: {
    alias: resolvedAliases
  },
};

如何为 Jest 使用我定义的别名？

提前致谢:)

Answer 1

我可以通过将 jest 配置移动到我的 craco 配置中来解决这个问题:

//craco.config.js
const path = require("path");
const alias = require("./src/config/aliases");

const SRC = "./src";
const aliases = alias(SRC);

const resolvedAliases = Object.fromEntries(
  Object.entries(aliases).map(([key, value]) => [
  Object.entries(alias("./src")).map(([key, value]) => [
    key,
    path.resolve(__dirname, value),
  ])
);

const resolvedJestAliases = Object.fromEntries(
  Object.entries(alias("<rootDir>/src")).map(([key, value]) => [
    `^${key}/(.*)$`,
    `${value}/$1`,
  ])
);

module.exports = {
  webpack: {
    alias: resolvedAliases,
  },
  jest: {
    configure: {
      verbose: true,
      moduleNameMapper: resolvedJestAliases
    }
  }
};