javascript - 使用 Jest 进行测试和使用 customize-cra 时添加 babel-plugin-rewired 的问题

Question

我正在尝试使用 customize-cra 包设置“ babel-plugin-rewire ”。贝娄是我的config-overrides.js

const path = require('path');
const {
  override, addLessLoader, addWebpackAlias, addBabelPlugins
} = require('customize-cra');

const overrideProcessEnv = () => (config) => {
  // eslint-disable-next-line no-param-reassign
  config.resolve.modules = [
    path.join(__dirname, 'src'),
  ].concat(config.resolve.modules);
  return config;
};

module.exports = {
  webpack: override(
    addLessLoader({
      javascriptEnabled: true,
    }),
    overrideProcessEnv({
      // eslint-disable-next-line global-require
      VERSION: JSON.stringify(require('./package.json').version),
    }),
    addWebpackAlias({
      src: path.resolve(__dirname, 'src'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@routes': path.resolve(__dirname, 'src/routes'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@containers': path.resolve(__dirname, 'src/containers'),
      '@util': path.resolve(__dirname, 'src/util'),
      '@constants': path.resolve(__dirname, 'src/constants'),
      '@actions': path.resolve(__dirname, 'src/appRedux/actions'),
      '@reducers': path.resolve(__dirname, 'src/appRedux/reducers'),
      '@sagas': path.resolve(__dirname, 'src/appRedux/sagas'),
      '@api': path.resolve(__dirname, 'src/api'),
      '@selectors': path.resolve(__dirname, 'src/appRedux/selectors'),
    }),
    ...addBabelPlugins(
      'babel-plugin-rewire',
    ),
  ),
  jest: (config) => {
    const cfg = config;
    cfg.verbose = true;
    cfg.collectCoverage = true;
    cfg.setupFilesAfterEnv = [
      '<rootDir>/setupTests.js',
    ];
    cfg.collectCoverageFrom = [
      '**/*.{js,jsx}',
      '!**/node_modules/**',
      '!**/vendor/**',
    ];
    cfg.moduleNameMapper = {
      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/assetsTransformer.js',
      '\\.(css|less)$': '<rootDir>/assetsTransformer.js',
      '@assets/(.*)': '<rootDir>src/assets/$1',
      '@routes/(.*)': '<rootDir>src/routes/$1',
      '@components/(.*)': '<rootDir>src/components/$1',
      '@containers/(.*)': '<rootDir>src/containers/$1',
      '@util/(.*)': '<rootDir>src/util/$1',
      '@constants/(.*)': '<rootDir>src/constants/$1',
      '@actions/(.*)': '<rootDir>src/appRedux/actions/$1',
      '@reducers/(.*)': '<rootDir>src/appRedux/reducers/$1',
      '@sagas/(.*)': '<rootDir>src/appRedux/sagas/$1',
      '@api/(.*)': '<rootDir>src/api/$1',
      '@selectors/(.*)': '<rootDir>src/appRedux/selectors/$1',
    };

    return cfg;
  },
};

你知道我该怎么做吗？我可以在开发中访问RewireAPI，但不能在测试环境中访问，当我将插件添加到babel.config.js时，我的所有 moduleNameMapper 根都不起作用。

标签： javascriptjestjsbabeljs