使用 react-app-rewired 和 customize-cra 時如何配置 Jest？

Question

我正在嘗試在使用來自customize-cra和react-app-rewired rewired 的override function 的create-react-app中使用Jest設置測試。 我已經設置了一個相對路徑別名，當我運行測試時它拋出錯誤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

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"
       }
   }
 ])

Answer 3

可以用.babelrc，我是這樣弄的

閱讀react-app-rewired的 README.md ，它對我有很大幫助。

// for jest 
{
    "plugins": [
        [
            "babel-plugin-root-import",
            {
                "rootPathSuffix": "src"
            }
        ]
    ]
}

為了

“babel-plugin-root-import”：“~6.4.1” “customize-cra”：“~0.9.1” “反應”：“~16.8.6”