标签: react-testing-library

添加这个问题是因为我在网上不容易找到答案。

我正在尝试使用react-testing-library它来测试组件是否正确呈现。然而，我收到了许多错误，这些错误似乎没有多大帮助。

这是我的测试文件（report.test.ts与代码中的组件一起）：

import { render } from "react-testing-library";
import "jest-dom/extend-expect";
import Report from "./Report";

test("component", () => {
  const reportData = {
    name: "test-report-name",
    url: "test-url"
  };
  const { getByText } = render(<Report report={reportData} />);

  expect(getByText("test-report-name")).toHaveAttribute("href", "test-url");
});

当我尝试运行测试时，出现错误SyntaxError: Unexpected token, expected "</>"。VS Code 中有一条红色波浪线，悬停时显示Argument of type 'Report' is not assignable to parameter of type 'ReactElement<any>'。

即使我将报告标签更改为简单<div />，我也能得到Cannot find name 'div'。

我的测试有什么问题吗？

fireEvent.focus()我在调用后无法拍摄快照。

这是测试。我这里有两个测试，1 比较输入聚焦之前的快照，1 比较输入聚焦之后的快照。

describe("Unit: <OutlinedInput />", (): void => {\n\n  describe("Initial render", (): void => {\n    describe("renders as snapshot", (): void => {\n      it("for standard fields", (): void => {\n        const { asFragment } = render(<OutlinedInput {...standardProps} />, {});\n        expect(asFragment()).toMatchSnapshot();\n      });\n    });\n  });\n\n  describe("On focus in, no input", (): void => {\n    describe("renders as snapshot", (): void => {\n      it("for standard fields", (): void => {\n        const { getByLabelText, container, asFragment } = render(\n          <OutlinedInput {...standardProps} …

我正在编写一个 Electron 应用程序，使用 React 作为前端，使用 JEST + React 测试库来运行测试。我在模块中有以下简化代码：

import React from 'react';
import { ipcRenderer } from 'electron';
import Paper from '@material-ui/core/Paper';
import LinearProgress from '@material-ui/core/LinearProgress';


const AccountCheckModule = () => {

  const [listingsCount, setListingsCount] = React.useState(0);

  React.useEffect(() => {
    ipcRenderer.on('count-listings', (event, count) => {
      setListingsCount(count);
    });

    ipcRenderer.send('count-listings');

    // Cleanup the listener events so that memory leaks are avoided.
    return function cleanup() {
      ipcRenderer.removeAllListeners('count-listings');
    };
  }, []);

  return (
    <Paper elevation={2} data-testid="paper">
        <p
          className={classes.listingsNumberTracker}
          data-testid="free-listings-counter"
        >
          Free listings: {listingsCount}/100 …

我有这个组件，我想使用 Jest 和 React 测试库进行测试：

export function GenericDivider({ stepsHeader = [], componentsFactory = [] }) {
   const [currentPage, changePage] = useState(0);
   const Component = componentsFactory[currentPage] || (() => <></>);

   return (
    <div className="container page__container">
          ...
                 <a
                   href="#"
                   key={name}
                   onClick={e => {
                     e.preventDefault();
                     if (index < componentsFactory.length) changePage(index);
                   }}
                   className={`nav-link ${currentPage === index && 'active'}`}
                 >
                   {name}
                 </a>
          ...
    </div>
   );
}

export default memo(GenericDivider);

我想测试当我点击时是否调用了 changePage，有没有办法使用 Jest 和 React 测试库来做到这一点？

我是测试新手，我试过这个，但它似乎不起作用

it('Should call changePage when button clicked', () => { …

我在一个组件中有两个蚂蚁设计日期选择器。我正在尝试更改和测试日期选择器的值，但无法在测试环境 dom 中找到日历输入。

日期选择器组件

import { DatePicker, Form } from "antd";
import React, { Component } from "react";

import moment from "moment";

class DatePickers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment().subtract(1, "month"),
      startDateError: "",
      endDate: moment(),
      endDateError: "",
    };
  }

  onStartDateChange = (date) => {
    this.setState({
      startDate: date,
      startDateError: date ? "" : "Please select start date",
    });
  };

  onEndDateChange = (date) => {
    this.setState({
      endDate: date,
      endDateError: date ? "" : "Please select …

我目前正在尝试使用 Mocked Provider 测试样式组件，如下所示：

import React from "react";
import TestResults from "./TestResults";
import {
  render,
  cleanup,
  findByTestId,
  findByText,
  waitForElement,
} from "@testing-library/react";
import { MockedProvider } from "@apollo/react-testing";




describe("TestResultsComponent", () => {
  describe("Overall", () => {
    it("should render successfully - base", async () => {
      const { getByText } = render(
        <MockedProvider>
          <TestResults />
        </MockedProvider>
      );
      expect(getByText("Preview")).toBeInTheDocument();
    });
  });
});

我在 TestResults 文件中使用 makeStyles 钩子

当我运行我的测试时，我收到以下错误：

TypeError: theme.spacing is not a function
 Material-UI: the `styles` argument provided is invalid.
      You …

我有这个测试：

const rendered = render(
  <TransactionReason
    reason={{ code: defaultReason }}
  />
);

expect(rendered.getByTestId('reasonInput')).toBeNull();

我想做的是：有一个组件具有，但是当prop 具有我给出的值testID = 'reasonInput'时，该组件不会呈现（代码：defaultReason）。reason但我收到一个错误，因为 Jest 找不到该 id，当然，它没有呈现。我认为这会产生一个 false 或 null 值，这就是为什么我尝试使用toBeNullortoBeFalsy或类似的东西。

那么我如何测试该组件是否存在？

我在一个项目中使用 Material-UI 和 React 测试库，但我在 TextField 设置为type="password". 我知道，在测试中，默认使用testId字段获取元素不是一个好习惯，但我找不到进入密码输入字段的方法。我无法使用，getByRole因为显然<input type="password">没有作用。输入框中没有文本，也没有占位符文本，当我尝试使用时，getByLabelText我收到此错误消息：

TestingLibraryElementError: Found a label with the text of: Password, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.

当我查看测试中渲染的元素时（我使用了screen.debug()），我意识到这就是 Material-UI 组成 TextField 的方式：

TestingLibraryElementError: Found a label with the text of: Password, however no form control was found associated to that label. Make sure you're using the …

我有一个 ant-design 下拉列表，它显示了悬停元素的列表。我想测试下拉菜单中的列表。我正在使用 fireEvent.mouseOver() 但它不起作用。screen.debug() 没有显示菜单。如何测试悬停元素？

提前致谢

所以我在 Jest 上使用“react-testing-library”编写单元测试，我有这个错误：

 Test suite failed to run

    ReferenceError: global is not defined

      at Object.<anonymous> (node_modules/@jest/core/node_modules/graceful-fs/graceful-fs.js:92:1)
      at Object.<anonymous> (node_modules/@jest/core/node_modules/expect/build/toThrowMatchers.js:10:24)
      at Object.<anonymous> (node_modules/@jest/core/node_modules/expect/build/index.js:35:48)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:387:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:408:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:261:3)