如何使用 craco 为 Jest 设置别名

Question

我正在构建由 create-react-app 提供的 React 应用程序。

我使用 craco 来简化配置，并为 TypeScript 和 Webpack 设置了 alise。

但是我在运行测试命令的时候，显示如下错误。

错误信息

 spec/showMessage.test.tsx
  ● Test suite failed to run

    Cannot find module '@/components/atom/TextButton' from 'src/pages/index.tsx'

    Require stack:
      src/pages/index.tsx
      spec/showMessage.test.tsx

      3 | import styled from 'styled-components';
      4 | 
    > 5 | import { TextButton } from '@/components/atom/TextButton';
        | ^

这是我的craco.config.js

craco.config.js

const path = require("path");

module.exports = {
  jest: {
    configure: {
      roots: ['<rootDir>/src', '<rootDir>/spec'],
      testMatch: ['<rootDir>/spec/**/*.{spec,test}.{js,jsx,ts,tsx}'],
    },
  },
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "./src/"),
      "@@": path.resolve(__dirname, "./")
    },
    extensions: ['.ts', '.tsx'],
  },
};

Answer 1

我找到了解决方案，我更新了 package.json 如下，它解决了这个问题。

{
  "name": "xxxxx",
   :
    
  },
  "jest": {
    "moduleNameMapper": {
      "^@/(.+)": "<rootDir>/src/"
    }
  }
}

如何使用 craco 为 Jest 设置别名

How to setup alias for Jest with craco

reactjs

jestjs

craco