Im new in React test and Im blocked in this case of my side-project. I have these components that im working on it. And I need to test, in this specific case, the child component if it returns the text that I want.
function FatherComponent(props) {
let myItems = props.listOfItems.placeItemsObject; //access a json
let myMessage = props.listofMessages.messagesObject; //access a json
return (
<div>
{myItems && myItems.length > 0 && (
<div>
{myItems.map((item, index) => {
return (
<div key={item.itemId}>
<ChildComponent item={item} myMessage={myMessage} />
</div>
);
})}
</div>
)}
</div>
);
}
export { FatherComponent };
function ChildComponent(props) {
let myMessage = props.myMessage;
let item = props.item;
return (
<div className="my-new-component">
{item.itemCount > 1 ? myMessage.aprovedTittle : myMessage.oldTittle}:
</div>
);
}
export { ChildComponent };
Im trying to test both scenarios (aprovedTittle and oldTittle), and it keeps returning these error message TypeError: Cannot read property 'itemCount' of undefined
, message TypeError: Cannot read property 'aprovedTittle' of undefined
and message TypeError: Cannot read property 'oldTittle' of undefined
.
describe("ChildComponent", () => {
const wrapper = mount(<ChildComponent item={item} myMessage={myMessage} />);
describe("for aprovedTittle case", () => {
it("should displays 'Approved tittle'", () => {
const text = wrapper.find('div[className="my-new-component"]').first();
const expectedText = "Approved tittle";
expect(text.text()).toBe(expectedText);
});
it("should displays 'Approved tittle'", () => {
const text = wrapper.find('div[className="my-new-component"]').first();
const expectedText = "Old Tittle tittle";
expect(text.text()).toBe(expectedText);
});
});
});
I guess it seems that it cannot access the props provided by the map loop from the FatherComponent
. How do I have to test for that?
Aucun commentaire:
Enregistrer un commentaire