验证反应功能组件是否存在

Question

我是 React 单元测试的新手，这里我有 React 代码，它工作正常但需要对其进行单元测试。我想验证组件是否存在，我尝试了两种不同的方法，但都不起作用：我正在使用 useSelector 和 useDispatch 这就是为什么 connect(null,null).

我的代码：

M2SelectionCard.js:

function ConnectedSelectionCard({ classes }) {
  

  return (
    <Card data-testid="M2SelectionCardd" className={classes.selectionCard}>
      <CardContent>
        
      </CardContent>
    </Card>
  );
}

const M2SelectionCard = connect(null, null)(ConnectedSelectionCard);

export default M2SelectionCard;

首先我是这样做的：

import React from "react";

import { expect } from "@jest/globals";
import { render, screen, cleanup } from "@testing-library/react";
import M2SelectionCard from "../M2SelectionCard";

test("test", () => {
  render(<M2SelectionCard />);
  const SelectionCardElement = screen.getByTestId("M2SelectionCardd");
  expect(SelectionCardElement).toBeInTheDocument();
  // expect(true).toBe(true);
});

出现错误：Could not find "store" in the context of "Connect(ConnectedSelectionCard)"。要么将根组件包装在 <Provider> 中，要么将自定义 React 上下文提供程序传递给 <Provider> 并将相应的 React 上下文使用者传递给连接选项中的 Connect(ConnectedSelectionCard)。'

import React from "react";
import { expect } from "@jest/globals";
import { render, screen, cleanup } from "@testing-library/react";
import M2SelectionCard from "../M2SelectionCard";
import { Provider } from "react-redux";
import configureStore from "../../redux/store";

const store = configureStore({});

it("test", () => {
  render(
    <Provider store={store}>
      <M2SelectionCard />
    </Provider>
  );
  const SelectionCardElement = screen.getByTestId("M2SelectionCardd");
  expect(SelectionCardElement).toBeInTheDocument();
});

之后我在测试中添加了商店（不知道我应该在这里添加它吗？）：错误信息： TypeError: Cannot read property 'selectionCard' of undefined 它指向 className={classes.selectionCard} 有什么想法吗？

Answer 1

TypeError: Cannot read property 'selectionCard' of undefined'

pointing to className={classes.selectionCard}

此错误表明它无法访问未定义对象的 selectionCard 属性，在本例中为 classes。

给定的待测组件：

function ConnectedSelectionCard({ classes }) {
  ...

  return (
    <Card data-testid="M2SelectionCardd" className={classes.selectionCard}>
      <CardContent>
        
      </CardContent>
    </Card>
  );
}

你仍然应该通过所有预期的道具，即 classes 道具。为此，一个空对象足以访问。换句话说，如果 classes 是一个空对象，那么 classes.selectionCard 计算结果为 undefined 而不是抛出错误。

it("test", () => {
  render(
    <Provider store={store}>
      <M2SelectionCard classes={{}} /> // <-- pass a classes prop
    </Provider>
  );
  const SelectionCardElement = screen.getByTestId("M2SelectionCardd");
  expect(SelectionCardElement).toBeInTheDocument();
});

验证反应功能组件是否存在

verify react functional component to be there

javascript

testing

unit-testing

reactjs

react-testing-library