craco的JEST配置

Question

我正在构建react应用程序，我使用craco来简化配置，并设置了make，但是当我运行测试命令时，会显示下面的错误。

无法从“src/路由器/Router.js”中找到模块“@layout/BlankLayout”

这是我的craco.config.jsenter code here

const path = require('path')
 
module.exports = {
  reactScriptsVersion: 'react-scripts',
  style: {
    sass: {
      loaderOptions: {
        sassOptions: {
          includePaths: ['node_modules', 'src/assets']
        }
      }
    },
    postcss: {
      plugins: [require('postcss-rtl')()]
    }
  },
  webpack: {
    alias: {
      '@src': path.resolve(__dirname, 'src'),
      '@assets': path.resolve(__dirname, 'src/@core/assets'),
      '@components': path.resolve(__dirname, 'src/@core/components'),
      '@layouts': path.resolve(__dirname, 'src/@core/layouts'),
      '@store': path.resolve(__dirname, 'src/redux'),
      '@styles': path.resolve(__dirname, 'src/@core/scss'),
      '@configs': path.resolve(__dirname, 'src/configs'),
      '@utils': path.resolve(__dirname, 'src/utility/Utils'),
      '@hooks': path.resolve(__dirname, 'src/utility/hooks')
    }
  },
  
}

试着：

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

但不起作用

Answer 1

开玩笑并不会自动知道你的webpack化名。它需要配置来了解它们。您的moduleNameMapper看起来不够，因为@layouts将映射到src/@layouts而不是所需的src/@core/layouts。我建议您更改moduleNameMapper以匹配您的别名。

 "jest": {
    "moduleNameMapper": {
      '@src/(.+)': "<rootDir>/src/$1",
      '@assets/(.+)': "<rootDir>/src/@core/assets/$1",
      '@components/(.+)': "<rootDir>/src/@core/components/$1",
      '@layouts/(.+)': "<rootDir>/src/@core/layouts/$1",
      '@store/(.+)':"<rootDir>/src/redux/$1",
      '@styles/(.+)': "<rootDir>/src/@core/scss/$1",
      '@configs/(.+)': "<rootDir>/src/configs/$1",
      '@utils': "<rootDir>/src/utility/Utils",
      '@hooks/(.+)': "<rootDir>/src/utility/hooks/$1"
    }
  },