不能在模塊外使用 import 語句@emotion

Question

我嘗試使用 Jest 測試 TextField 組件

文本字段.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()
})

文本字段.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選項。