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

时间:2019-12-04 19:31:06

标签: reactjs typescript jestjs babeljs tailwind-css

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

如下图所示:

enter image description here

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

enter image description here

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

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

如下图所示:

enter image description here

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

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

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

谢谢!

0 个答案:

没有答案