具有“测试套件无法运行”错误的React + Typescript + TailwindCSS + Jest项目

Question

我有一个 React + Typescript + TailwindCSS + Jest 项目，该项目运行一些单元测试。我在这里使用Jest。

当我跑步时：

$ yarn test

我收到这个烦人的错误：

tailwind.macro: Couldn’t find Tailwind config ...\src\tailwind.macro.js Learn more: https://www.npmjs.com/package/tailwind.macro

如下图所示：

\src\tailwind.macro.js文件仅在\.babelrc上引用。

.babelrc

{
  "plugins": [
    "emotion",
    [
      "root-import",
      {
        "rootPathSuffix": "./src/",
        "rootPathPrefix": "~/"
      }
    ],
    [
      "macros",
      {
        "tailwind": {
          "config": "./src/tailwind.macro.js",
          "format": "auto"
        }
      }
    ]
  ]
}

（引用不存在的文件：./src/tailwind.macro.js）

如果我删除行："config": "./src/tailwind.macro.js",，则会收到错误消息：

相反，如果我改为，则删除该块：

"tailwind": {
  "config": "./src/tailwind.macro.js",
  "format": "auto"
}

然后我得到了一个与以前非常相似的错误，顶部出现了额外的消息（两次）：

There was an error trying to load the config "tailwind" for the macro imported from "tailwind.macro. Please see the error thrown for more information.

如下图所示：

以下是该问题涉及的两个测试文件：

src \ App.test.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

src \ components \ core \ Layout.test.tsx

import React from "react";
import { render } from "../../utils/test-utils";
import Layout from "./Layout";

it("renders welcome message", () => {
  const { getByText } = render(<Layout />);

  expect(getByText("Welcome to React")).toBeInTheDocument();
});

关于如何解决这个烦人的问题的任何想法？

谢谢！