无法在模块@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选项。

create-react-app emotion javascript jestjs reactjs reactjs