不能在模块@emotion 外使用 import 语句

Question

我尝试使用 Jest 测试 TextField 组件

正文-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()
})

文本-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 配置。我在运行ning 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)

有什么想法吗？

Answer 1

我认为问题出在 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 选项。

不能在模块@emotion 外使用 import 语句

Cannot use import statement outside a module @emotion

javascript

emotion

reactjs

jestjs

create-react-app