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

我有一个 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

如下图所示:

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

\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",,则会收到错误消息:

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

相反,如果我改为,则删除该块:

"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.

如下图所示:

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

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

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();
});

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

谢谢!

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

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2975052.html

大家都在问