Question

我正在尝试使用Jest和create-react-app中的override函数的customize-cra中的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应用在幕后使用了react-scripts，因此不会获取您的webpack配置文件。但是，有一种自定义方法，您可以将jest配置放在package.json的根目录中：

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

如果您进入react-scripts / scripts / test的源代码并看到它正在创建一个有趣的配置，您可以看到react-script正在选择此配置：

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

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

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

paths.appPackageJson是您的package.json

Answer 2

由于测试不能通过webpack进行，因此路径别名将不起作用。但是，它们确实通过了Babel，因此您可以使用“ babel-plugin-module-resolver”。通常，您会这样：

// .babelrc
{
"plugins": [
  ["module-resolver", {
    "root": ["./src"],
    "alias": {
      "test": "./test",
      "components": "./src/components"
    }
  }]
 ]
}

但是看着上面的override看起来像这样：

addBabelPlugin([
  "babel-plugin-root-import",
  {
    rootPathSuffix: "./src"
  },
  "module-resolver",{
      "root": ["./src"],
       "alias": {
          "test": "./test",
          "components": "./src/components"
       }
   }
 ])

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

2 个答案: