[英]Cannot use import statement outside a module @emotion
I tried to test TextField component using Jest我尝试使用 Jest 测试 TextField 组件
text-field.test.js文本字段.test.js
import React from "react";
import { render, screen } from "@testing-library/react";
import TextField from '../text-field'
import "@testing-library/jest-dom";
test('TextField', () => {
render(<TextField name="Name" />)
screen.debug()
})
text-field.js文本字段.js
import React from "react";
import {
FormControl,
InputLabel,
Input,
FormHelperText,
} from "@material-ui/core";
import { css } from "@emotion/core";
import PropTypes from "prop-types";
const TextField = ({ name, helperText, error, value, onChange }) => {
return (
<FormControl error={error}>
<InputLabel
css={css`
text-transform: capitalize;
`}
htmlFor={name}
>
{"Name"}
</InputLabel>
<Input id={name} value={value} onChange={onChange} />
<FormHelperText id={`${name}-helper-text`}>{helperText}</FormHelperText>
</FormControl>
);
};
TextField.propTypes = {
name: PropTypes.string.isRequired,
};
export default TextField;
This is my babel config.这是我的 babel 配置。 I included @emotion/babel-preset-css-prop
into babel before running Jest.在运行 Jest 之前,我将@emotion/babel-preset-css-prop
包含在 babel 中。
babel.config.js babel.config.js
// babel.config.js
module.exports = {
presets: ["@emotion/babel-preset-css-prop", "@babel/preset-env"],
};
I tried to run yarn test
, but it fails with the following error.我尝试运行yarn test
,但失败并出现以下错误。
import { jsx as ___EmotionJSX } from "@emotion/core";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
Any ideas?有任何想法吗?
I think the problem is from the create-react-app
script which somehow puts your @emotion/babel-preset-css-prop
on the top of presets
list which I didn't look deep into that.我认为问题出在create-react-app
脚本上,它以某种方式将您的@emotion/babel-preset-css-prop
放在了我没有深入研究的presets
列表的顶部。
I would suggest you to take full control of your test by just simply create your own script to run your test which is quite simple like: npx jest
which you can take full control on your test.我建议您通过简单地创建自己的脚本来运行您的测试来完全控制您的测试,这非常简单,例如: npx jest
,您可以完全控制您的测试。
Here's the few steps doing that:这是执行此操作的几个步骤:
Add your script test package.json
添加您的脚本测试package.json
scripts: {
test: "jest"
}
Target your test on node babel.config.js
:将测试定位在节点babel.config.js
上:
module.exports = {
presets: [
["@babel/preset-env", {
targets: {
node: 'current',
},
}],
"@emotion/babel-preset-css-prop",
]
};
Add your custom matchers which offers by create-react-app
script offered in your file tests import "@testing-library/jest-dom/extend-expect"
:添加您的自定义匹配器,该匹配器由文件测试中提供的create-react-app
脚本提供import "@testing-library/jest-dom/extend-expect"
:
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import "@testing-library/jest-dom/extend-expect" // Add custom matcher
import Layout from "../layout";
test("Check if layout display title according to prop", async () => {
const { getByText } = render(<Layout title={"Abc"} />);
expect(getByText("Abc")).toBeInTheDocument(); // To have kind of matcher
});
// ...
That's it!而已! Hopefully you would take more control of your tests instead of having no ideas how to custom jest
options with other script.希望您能更好地控制您的测试,而不是不知道如何使用其他脚本自定义jest
选项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.