用反应js中的jestand酶测试儿童评论中的道具值

Question

这是我的代码，想为props.isFront和props.QCount? props.Qcount + " Questions": ' ' props.QCount? props.Qcount + " Questions": ' '这类道具 Card.js

    import React from 'react';

    const Card = (props) =>{
      return (
        <div className="card-body justify-content-center align-items-center">
          {
             props.isFront ?
             <div className="card-content">
              <p className="card-text fs-1 card-hd"><span className="card-title-icon"></span>{props.CReference}</p>
              <p className="card-text fs-1 card-txt fw-bold ptext">{props.Description}</p>
              <p className="card-text fs-1">{props.CompleteText} <span className="fw-bold">{props.CompletedCount}</span> {props.AssignedText} <span className="fw-bold">{props.AssignedCount}</span></p>
              <p className="card-text fs-1 card-sub-hd">{props.Title}</p>
              <p className="card-text fs-1 ptext card-sub-desc">{props.SubTitle}</p>
              {
              props.isStudent ?
                <div>
                  <p className="card-text fs-1 ptext">{props.QCount ? props.Qcount + " Questions" : ' '}</p>
                  <p className="card-text fs-1 ptext">{props.StarsEarned ? "Earn up to " + props.StarsEarned + " stars" : ' '}</p>
                  <p className="card-text fs-1 ptext">{props.AssignedDate ? "Assigned on " + props.AssignedDate : ' '}</p>
                  <p className="card-text fs-1 ptext c-red">{props.IsDue ? 'Overdue': ' '}</p>
                  <p>{props.ResultCardLabel}</p>
                </div>
                : <div></div>
              }
            </div>
          :
            <div className="card-back-content">
                <p className="card-text fs-1 card-hd">{props.BackTitle}</p>
                <p className="card-text fs-1">{props.BackDesc}</p>
            </div>
          }
        </div>

      );
    }
    export default Card;

Card.test.js

import React from "react";
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import Card from "../../../src/utills/Card";
import { configure } from 'enzyme';
import { jest } from '@jest/globals';

configure({ adapter: new Adapter() });

 Enzyme.configure({ adapter: new Adapter() });
describe("Card component", () => {
  
  it("check card isFront true value", () => {
    const props = {
      isFront: false,
      isStudent: false
    }
    const wrapper = shallow(<Card isFront="false"/>);
    //expect(wrapper.prop('CReference')).toEqual('Understand');
    wrapper.setProps({ isFront: true });
    expect(wrapper.props().isFront).toEqual(true);
  });
});

我在下面的行中遇到错误：

"expect(wrapper.props().isFront).toEqual(true);"

这是错误：

expect(received).toEqual(expected) // deep equality

    Expected: true
    Received: undefined

那么我如何在card.js中测试上述代码的道具

请帮我写，我对 jest+enzyme 测试用例很陌生

这是我的 package.json

"react": "^18.0.2",
"jest": "^26.6.3",
 "enzyme": "^3.11.0",
"@babel/preset-env": "^7.18.10",
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.9.3",
    "@mui/material": "^5.9.2",
    "@scholastic/ereader": "^3.11.12",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.1",
    "babel-jest": "^26.6.3",