我有一个 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();
});
关于如何解决这个烦人的问题的任何想法?
谢谢!