here is my code and want to write test case for props.isFront and props.QCount ? props.Qcount + " Questions" : ' ' this type of props
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);
});
});
i'm getting error on the below line:
"expect(wrapper.props().isFront).toEqual(true);"
this is the error:
expect(received).toEqual(expected) // deep equality
Expected: true
Received: undefined
so how can i test the props the above code in card.js
Please help me so write, i'm very new to jest+enzyme test case
this is my 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",