'How to test a component that has a conditional to be displayed?

I am trying to test a component with jest and react-testing-library that contains a conditional to be displayed.

      export default function CloseCollaborators({ city }: CollaboratorsCityModel) {
  const {
    collaboratorsFind,
    loadingCollaboratorsFind,
    numberPeopleOffice,
  } = CloseCollaboratorsUsers(city);

  return (
    <div>
      {numberPeopleOffice > 0 && (
        <WidgetContainer>
          <div className="closeCollaborators">
            <Flex>
              <Flex.Item grow>
                {loadingCollaboratorsFind ? (
                  <Loader label="Loading your close collaborators" />
                ) : (
                  <CloseCollaboratorsList
                    collaboratorsFind={collaboratorsFind}
                  />
                )}
              </Flex.Item>
            </Flex>
          </div>
        </WidgetContainer>
      )}
    </div>
  );
}

where CloseCollaboratorsUsers is a function that returns collaboratorsFind as an object, loadingCollaboratorsFind as a boolean and numberPeopleOffice as a number.

The following code in test

import { render, screen, waitFor } from "@testing-library/react";
import CloseCollaborators from "./CloseCollaborators";

    describe("test archive closeCollaborators", () => {
      it("validate the text initial loading 4 ", async () => {
        const { getByText } = render(<CloseCollaborators city="Sofia" />);
    
        const titleLoading = await waitFor(() =>
          getByText(/Loading your close collaborators/)
        );
    
        expect(titleLoading).toBeDefined();
      });
    });

and I get this error

and returns the following errorUnable to find an element with the text: /Loading your close collaborators/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, <script />, <style />
    <body>
      <div>
        <div />
      </div>
    </body>

How could I test the component correctly? Thanks in advance

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to test a component that has a conditional to be displayed?

Sources

Related Questions