使用 react-app-rewired 和 custom-cra 时如何配置 Jest？

Question

我正在尝试Jest在create-react-app使用override函数 fromcustomize-cra和 的a中设置测试react-app-rewired。我已经设置了一个相对路径别名，当我运行测试时它抛出错误cannot find module

这是代码...

// LoginForm.test.js

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import LoginForm from './LoginForm';


it('submits', () => {
  const onSubmit = jest.fn();
  const { getByText } = render(<LoginForm onSubmit={onSubmit} />);
  fireEvent.click(getByText('Log in'));
  expect(onSubmit).toHaveBeenCalled();
});

// config-overrides.js

const {
  override,
  fixBabelImports,
  addLessLoader,
  addBabelPlugin
} = require("customize-cra");

module.exports = override(
  fixBabelImports("import", [
    {
      libraryName: "antd",
      libraryDirectory: "es"
      // style: true,
    },
    {
      libraryName: "ant-design-pro",
      libraryDirectory: "lib"
      // style: true,
    }
  ]),

  addBabelPlugin([
    "babel-plugin-root-import",
    {
      rootPathSuffix: "./src"
    }
  ]),

  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      "@select-item-selected-font-weight": "500",
      "@font-family":
        '"Futura W01", "Futura", -apple -system, BlinkMacSystemFont, "Segoe UI", sans-serif',
      "@pagination-font-family":
        '"Futura W01", "Futura", -apple -system, BlinkMacSystemFont, "Segoe UI", sans-serif',
      "@statistic-font-family":
        '"Futura W01", "Futura", -apple -system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    }
  })
);

非常感谢任何指点，谢谢。

Answer 1

这可能有点旧，但我刚刚遇到并解决了它，所以也许它可以帮助其他人。

React app rewired 在底层使用 react-scripts，所以它不会选择你的 webpack 配置文件。但是有一种方法可以自定义它，您可以将 jest 配置放在 package.json 的根目录中：

"jest": {
    "moduleNameMapper": {
        "^@app(.*)$": "<rootDir>/src/ui/app$1"
    },
    "setupFiles": [
       "<rootDir>/config/jest/setupTests.js"
    ]
}

如果您转到 react-scripts/scripts/test 的源代码并看到它正在创建 jest 配置，则可以看到 react-script 正在获取此配置：

const createJestConfig = require('./utils/createJestConfig');

该文件使用 package.json 中的 jest 配置覆盖默认配置：

const overrides = Object.assign({}, require(paths.appPackageJson).jest);

其中paths.appPackageJson 是你的package.json