Блог

Я попытался протестировать компонент TextField с помощью Jest

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. Я включил @emotion/babel-preset-css-prop в babel перед запуском Jest.

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"
}
  

Настройте свой тест на node 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 параметры с помощью другого скрипта.