如何解决无法在模块@emotion外部使用import语句
我尝试使用Jest测试TextField组件
text-field.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
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;
这是我的babel配置。在运行Jest之前,我将@emotion/babel-preset-css-prop
放入了babel。
babel.config.js
// babel.config.js
module.exports = {
presets: ["@emotion/babel-preset-css-prop","@babel/preset-env"],};
我尝试运行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)
有什么想法吗?
解决方法
我认为问题出在create-react-app
脚本中,该脚本以某种方式将您的@emotion/babel-preset-css-prop
放在了presets
列表的顶部,而我对此并不了解。
我建议您通过简单地创建自己的脚本来运行测试来完全控制测试,该脚本非常简单,例如:npx jest
,您可以完全控制测试。
这是执行此操作的几个步骤:
添加脚本测试package.json
scripts: {
test: "jest"
}
将测试目标对准节点babel.config.js
:
module.exports = {
presets: [
["@babel/preset-env",{
targets: {
node: 'current',},}],"@emotion/babel-preset-css-prop",]
};
添加由文件测试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
});
// ...
就是这样!希望您可以更好地控制测试,而不用不知道如何使用其他脚本自定义jest
选项。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。