mardi 30 juin 2020

How to test map() result props passed to a child componente through react render function?

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