verify react functional component to be there

I’m new to react unit testing, here I have react code which works fine but need to unit test it. I want to verify the component to be there, I have tried in two different ways and both of them does not work: I’m using useSelector and useDispatch thats why connect(null,null).

my code:

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;

first I did like this:

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);
});

and got error : Could not find "store" in the context of "Connect(ConnectedSelectionCard)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(ConnectedSelectionCard) in connect options.’

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();
});

after that I added store to it in test (don’t know should I add it here ?): error message: TypeError: Cannot read property 'selectionCard' of undefined it points to className={classes.selectionCard} any idea ?

Answer

TypeError: Cannot read property 'selectionCard' of undefined'

pointing to className={classes.selectionCard}

This error is saying that it cannot access a selectionCard property of an undefined object, classes in this case.

Given component under test:

function ConnectedSelectionCard({ classes }) {
  ...

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

You should still pass all the expected props, i.e. a classes prop. For this purpose an empty object is sufficient enough to access into. In other words, if classes is an empty object then classes.selectionCard evaluates to undefined instead of throwing an error.

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