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

Question

我尝试使用 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)

有什么想法吗？

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 选项。