@testing-library/react#cleanup JavaScript Examples

describe("CategoryPage", () => {
  const cache = new InMemoryCache();

  afterEach(cleanup);

  it("renders CategoryPage and title based on description of mock Category 1(using params argument)", async () => {
    const page = render(
      <MockedProvider cache={cache} addTypename={false}>
        <CategoryPage categories={mockCategoryList} materials={mockMaterials} />
      </MockedProvider>
    );
    page.debug();
    await waitForElement(() => page.getByText(/first family/i));
  });

  it("renders CategoryPage and, after iterating over mocked catergory 1 material_ids, it renders grid cards with names of mocked material instances 1, 2 and 4", async () => {
    const page = render(
      <MockedProvider cache={cache} addTypename={false}>
        <CategoryPage categories={mockCategoryList} materials={mockMaterials} />
      </MockedProvider>
    );
    page.debug();
    await waitForElement(() => page.getByText(/first material/i));
    await waitForElement(() => page.getByText(/second material/i));
    await waitForElement(() => page.getByText(/fourth material/i));
  });
});

describe('BreadcrumbItem component', () => {
  afterEach(cleanup);

  it('it should render without explode', () => {
    const { container } = render(<BreadcrumbItem path="/" label="foo" icon="rocket" />);

    should.exist(container);
  });

  it('should render an \'anchor\' tag if path is defined', () => {
    const { container } = render(<BreadcrumbItem path="/" label="Foo" />);
    const anchor = container.querySelector('a');

    expect(anchor).to.exist;
    expect(anchor.href).to.equal('/');
  });

  it('should not render an \'anchor\' tag if path is not defined', () => {
    const { container } = render(<BreadcrumbItem label="Foo" />);
    const anchor = container.querySelector('a');

    expect(anchor).not.to.exist;
  });

  it('should render an icon if defined', () => {
    const { container } = render(<BreadcrumbItem icon="rocket" />);
    const icon = container.querySelector('.bi.bi-icon');

    expect(icon).to.exist;
  });
});

describe('<Responsive />', () => {
    beforeEach(() => {
        mockMatchMedia();
    });

    afterEach(() => {
        unmockMatchMedia();
        cleanup();
    });

    test('should render correctly', () => {
        window.resizeTo(1024, 768);
        const mockRenderProp = jest.fn(() => <h1>Mock test</h1>);

        const { asFragment } = render(
            <ResponsiveProvider {...props}>
                <Responsive>{mockRenderProp}</Responsive>
            </ResponsiveProvider>
        );

        expect(asFragment()).toMatchSnapshot();
    });

    test('should return the context values to the render prop correctly', () => {
        window.resizeTo(1024, 768);
        const mockRenderProp = jest.fn(() => null);

        render(
            <ResponsiveProvider {...props}>
                <Responsive>{mockRenderProp}</Responsive>
            </ResponsiveProvider>
        );

        expect(mockRenderProp).toHaveBeenCalledTimes(2);
        expect(mockRenderProp).toHaveBeenLastCalledWith(mockContextContent);
    });
});

describe('DiagramCanvas component', () => {
  afterEach(cleanup);

  it('should render without explode', () => {
    const { container } = render(<DiagramCanvas />);

    should.exist(container);
    expect(container.querySelector('div')).to.exist;
  });

  it('should have default classes', () => {
    const { container } = render(<DiagramCanvas />);
    const wrapper = container.querySelector('div');

    expect(wrapper.getAttribute('class').split(' ')).to.include.members(['bi', 'bi-diagram']);
  });
});

describe("AddStore tests", () => {
  afterEach(cleanup);

  test("Should display addNewStore", async () => {
    const { getByText } = render(<AddStore />);

    const addNewStore = getByText(/addNewStore/);
    expect(addNewStore).toBeInTheDocument();
  });
});

describe('CountriesCell', () => {
  afterEach(() => {
    cleanup()
  })
  it('Loading renders successfully', () => {
    expect(() => {
      render(<Loading />)
    }).not.toThrow()
  })
  it('Empty renders successfully', () => {
    expect(() => {
      render(<Empty />)
    }).not.toThrow()
  })
  it('Failure renders successfully', () => {
    expect(() => {
      render(<Failure error={{ message: 'error message' }} />)
    }).not.toThrow()
  })
  it('Success renders successfully', () => {
    expect(() => {
      Success({
        countries: [
          { iso: 'itl', name: 'Italy' },
          { iso: 'chn', name: 'China' }
        ],
        enabledCountries: ['itl', 'chn'],
        defaultCountry: 'itl'
      })
    }).not.toThrow()
  })
})

describe("<AlertBanner />", () => {
  afterEach(() => {
    cleanup();
  });

  describe("on close", () => {
    let onCloseStub;
    let alertBannerComponent;

    beforeEach(() => {
      onCloseStub = jest.fn();
      alertBannerComponent = render(
        <AlertBanner onClose={onCloseStub}>
          <AlertBannerText text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua" />
          <AlertBannerButton onClick={NOOP}>Lorem Ipsum Salura</AlertBannerButton>
        </AlertBanner>
      );
    });

    it("should be able to close alert banner when clicking on close button", () => {
      const { container } = alertBannerComponent;
      fireEvent.click(container.querySelector(".monday-alert-banner__alert-banner-close-btn"));
      expect(onCloseStub.mock.calls.length).toBe(1);
    });

    describe("a11y", () => {
      it("should add the label", () => {
        const ariaLabel = "Lable Name";
        const { getByLabelText } = render(<AlertBanner ariaLabel={ariaLabel} />);
        const alertBannerComponentLabel = getByLabelText(ariaLabel);
        expect(alertBannerComponentLabel).toBeTruthy();
      });
    });
  });
});

describe('T', () => {
  afterEach(cleanup);

  it('renders text', () => {
    const message = 'Hello <b>safe text</b>';
    render(<T _str={message} />);
    expect(screen.queryByText(message)).toBeInTheDocument();
  });

  it('renders text with param', () => {
    const message = 'Hello <b>{username}</b>';
    render(<T _str={message} username="JohnDoe" />);
    expect(screen.queryByText('Hello <b>JohnDoe</b>')).toBeInTheDocument();
  });

  it('rerenders on prop change', () => {
    const MyComp = () => {
      const [word, setWord] = useState('');
      return (
        <>
          <input value={word} onChange={(e) => setWord(e.target.value)} />
          <p><T _str="hello {word}" word={word} /></p>
        </>
      );
    };
    render(<MyComp />);
    fireEvent.change(
      screen.getByRole('textbox'),
      { target: { value: 'world' } },
    );
    expect(screen.getByText('hello world')).toBeTruthy();
  });

  it('renders react elements', () => {
    render(<T _str="hello {w}" w={<b>world</b>} />);
    expect(screen.getByText('world')).toBeTruthy();
  });
});

afterEach(cleanup);

afterEach(cleanup);

afterEach(() => {
  cleanup();
});

beforeEach(cleanup);

afterEach(cleanup);

describe("MaterialPage", () => {
  afterEach(cleanup);

  it("renders MaterialPage without error and checks for the existence of an element with the text 'Locate Centers'", async () => {
    const page = render(
      <MockedProvider>
        <MaterialPage />
      </MockedProvider>
    );
    //some useful methods commented out below
    // await Promise.resolve();
    // page.debug();
    expect(page).toEqual(
      expect.objectContaining({
        baseElement: expect.anything()
      })
    );

    await waitForElement(() => page.getByText(/Locate Centers/i));
  });

  it("renders MaterialPage and checks that Badge component is being called/imported", async () => {
    const page = render(
      <MockedProvider mocks={mocksQuery} addTypename={false}>
        <MaterialPage />
      </MockedProvider>
    );

    await waitForElement(() => page.getByText(/some fake image/i));
  });

  it("renders MaterialPage and calls an Actual query that checks mock response against mock materials, then checks the page for an element that contains the text that would be rendered if that query was satisfied", async () => {
    const page = render(
      <MockedProvider mocks={mocksQuery} addTypename={false}>
        <MaterialPage />
      </MockedProvider>
    );

    await waitForElement(() => page.getByText(/The first mocked material/i));
  });
});

describe('Alert component', () => {
  afterEach(() => {
    sinon.restore();
    cleanup();
  });

  it('it should render without explode', () => {
    const { container } = render(<Alert>some text here</Alert>);

    should.exist(container);
    expect(container.querySelector('.bi.bi-alert')).to.exist;
  });

  it('should have default classes', () => {
    const { container } = render(<Alert>some test here</Alert>);
    // using div just to test if it has default classes
    const alert = container.querySelector('div');

    expect(alert.getAttribute('class').split(' ')).to.include.members(['bi', 'bi-alert', 'alert-default']);
  });

  it('should accept an "id" prop', () => {
    const { container } = render(<Alert id="label">some text here</Alert>);
    const alert = container.querySelector('.bi.bi-alert');

    expect(alert.id).to.equal('label');
  });

  it('should allow adding custom classes', () => {
    const { container } = render(<Alert className="foo">some text here</Alert>);
    const alert = container.querySelector('.bi.bi-alert');

    expect(alert.getAttribute('class').split(' ')).to.include.members(['foo']);
  });

  it('should render the given child string', () => {
    const { getByText } = render(<Alert>some text here</Alert>);

    expect(getByText(/some text here/).textContent).to.equal('some text here');
  });

  it('should allow to define custom style', () => {
    const { container } = render(<Alert style={{ margin: '10px' }}>some text here</Alert>);
    const alert = container.querySelector('.bi.bi-alert');

    expect(alert.getAttribute('style')).to.equal('margin: 10px;');
  });

  it('should allow to change different colors', () => {
    const { container, rerender } = render(<Alert color="secondary">some text here</Alert>);
    const alert = container.querySelector('.bi.bi-alert');

    expect(alert.getAttribute('class').split(' ')).to.include.members(['alert-secondary']);
    expect(alert.getAttribute('class').split(' ')).to.not.include.members(['alert-default']);

    rerender(<Alert color="info">some text here</Alert>);
    expect(alert.getAttribute('class').split(' ')).to.include.members(['alert-info']);
    expect(alert.getAttribute('class').split(' ')).to.not.include.members(['alert-secondary']);

    rerender(<Alert>some text here</Alert>);
    expect(alert.getAttribute('class').split(' ')).to.include.members(['alert-default']);
    expect(alert.getAttribute('class').split(' ')).to.not.include.members(['alert-info']);
  });

  it('should perform the onClose function when clicking on the x button', () => {
    const onCloseSpy = sinon.spy();
    const { container } = render(<Alert onClose={onCloseSpy}>some text here</Alert>);
    const alertButton = container.querySelector('.bi.bi-alert').querySelector('.alert-button');

    expect(alertButton).to.exist;
    expect(alertButton.tagName).to.equal('BUTTON');

    fireEvent.click(alertButton);
    const firstCallArgs = onCloseSpy.args[0];

    expect(onCloseSpy.callCount).to.equal(1);
    expect(firstCallArgs[0]).to.exist;
  });
});

describe('Icon component', () => {
  afterEach(cleanup);

  it('should render without explode', () => {
    const { container } = render(<Icon name="heart" />);

    should.exist(container);
    expect(container.querySelector('svg')).to.exist;
  });

  it('should have default classes', () => {
    const { container } = render(<Icon name="heart" />);
    const icon = container.querySelector('svg');

    expect(icon.getAttribute('class').split(' ')).to.include.members(['bi', 'bi-icon']);
  });

  it('should accept an "id" prop', () => {
    const { container } = render(<Icon name="heart" id="foo" />);
    const icon = container.querySelector('svg');

    expect(icon.id).to.equal('foo');
  });

  it('should allow adding custom classes', () => {
    const { container } = render(<Icon name="heart" className="foo" />);
    const icon = container.querySelector('svg');

    expect(icon.getAttribute('class').split(' ')).to.include.members(['foo']);
  });

  it('should allow to define custom style', () => {
    const { container } = render(<Icon name="heart" style={{ margin: '10px' }} />);
    const icon = container.querySelector('svg');

    expect(icon.getAttribute('style')).to.equal('margin: 10px;');
  });

  it('should allow to define the icon color', () => {
    const { container, rerender } = render(<Icon name="heart" color="primary" />);
    const icon = container.querySelector('svg');

    expect(icon.getAttribute('class').split(' ')).to.include.members(['icon-primary']);

    rerender(<Icon name="heart" color="warning" />);

    expect(icon.getAttribute('class').split(' ')).to.include.members(['icon-warning']);
    expect(icon.getAttribute('class').split(' ')).to.not.include.members(['icon-primary']);
  });

  it('should allow to define the icon size', () => {
    const { container, rerender } = render(<Icon name="heart" size="small" />);
    const icon = container.querySelector('svg');

    expect(icon.getAttribute('class').split(' ')).to.include.members(['fa-sm']);

    rerender(<Icon name="heart" size="large" />);

    expect(icon.getAttribute('class').split(' ')).to.include.members(['fa-lg']);
    expect(icon.getAttribute('class').split(' ')).to.not.include.members(['fa-sm']);
  });
});

afterEach(cleanup);

describe('useIsMobile()', () => {
    beforeEach(() => {
        jest.clearAllMocks();
        mockMatchMedia();
    });

    afterEach(() => {
        cleanup();
        unmockMatchMedia();
    });

    test('should return not isMobile when window size md and mobile breakpoint md', () => {
        const windowSizeMd = 960;
        window.resizeTo(windowSizeMd, 768);

        render(
            <ResponsiveProvider {...props} mobileBreakpoint="md">
                <MockComponent>{mockRenderProp}</MockComponent>
            </ResponsiveProvider>
        );

        expect(mockRenderProp).toHaveBeenCalledTimes(2);
        expect(mockRenderProp).toHaveBeenLastCalledWith({
            isMobile: false,
            isCalculated: true,
        });
    });

    test('should return isMobile when window size sm and mobile breakpoint md', () => {
        const windowSizeSm = 576;
        window.resizeTo(windowSizeSm, 768);

        render(
            <ResponsiveProvider {...props} mobileBreakpoint="md">
                <MockComponent>{mockRenderProp}</MockComponent>
            </ResponsiveProvider>
        );

        expect(mockRenderProp).toHaveBeenCalledTimes(2);
        expect(mockRenderProp).toHaveBeenLastCalledWith({
            isMobile: true,
            isCalculated: true,
        });
    });

    test('should return not isMobile when window size sm and mobile breakpoint sm', () => {
        const windowSizeSm = 576;
        window.resizeTo(windowSizeSm, 768);

        render(
            <ResponsiveProvider {...props} mobileBreakpoint="sm">
                <MockComponent>{mockRenderProp}</MockComponent>
            </ResponsiveProvider>
        );

        expect(mockRenderProp).toHaveBeenCalledTimes(2);
        expect(mockRenderProp).toHaveBeenLastCalledWith({
            isMobile: false,
            isCalculated: true,
        });
    });

    test('should return isMobile when window size sm and mobile breakpoint sm', () => {
        const windowSizeXs = 320;
        window.resizeTo(windowSizeXs, 768);

        render(
            <ResponsiveProvider {...props} mobileBreakpoint="sm">
                <MockComponent>{mockRenderProp}</MockComponent>
            </ResponsiveProvider>
        );

        expect(mockRenderProp).toHaveBeenCalledTimes(2);
        expect(mockRenderProp).toHaveBeenLastCalledWith({
            isMobile: true,
            isCalculated: true,
        });
    });
});