How can I test that the Lightbox component is opening and closing correctly?

[virusxd521]

I have a conditional button that will open the light box upon click.
I provided mock data with images hence the button should be visible.
Now the question is, how can I test that the carousel is open and then fire an event and verify that the carousel got closed successfully?

        {message.images && message.images.length > 0 && paneSource !== TMSPAGE.ICU && (
          <IconButton aria-label="image carousel" data-test="detail-pane-imageLink" onClick={handleIconClick}>
            <Image size="xlarge" />
          </IconButton>
        )}
        <Lightbox
          close={() => setIsGalleryVisible(false)}
          // data-test="lightbox-container"
          open={isGalleryVisible}
          plugins={[Zoom]}
          slides={
            message.images &&
            message.images.map((image: CarouselImage) => ({
              downloadUrl: rootContext.azureSas?.replace('{0}', `${image.container}/${image.imageUrl}`),
              src: rootContext.azureSas?.replace('{0}', `${image.container}/${image.imageUrl}`),
            }))
          }
        />

Test:
(I copied the expect from the docs in test/unit/Lightbox.spec.ts, that's how the verification for this elements is being done)

  it('should open lightbox and allow navigation', async () => {
    const mockMessageWithImages: TranslationSegment = { ...mockMessage };
    mockMessageWithImages.images = [
      {
        container: 'Test container',
        imageUrl: 'https://picsum.photos/200/300',
      },
      {
        container: 'Test container',
        imageUrl: 'https://picsum.photos/200/300',
      },
    ];

    await act(async () => {
      render(
        <RootContext.Provider value={mockRootContext}>
          <DetailPane {...defaultProps} message={mockMessageWithImages} />
        </RootContext.Provider>,
      );
    });

    expect(screen.getByTestId('detail-pane-imageLink')).toBeInTheDocument();
    fireEvent.click(screen.getByTestId('detail-pane-imageLink'));
    await waitFor(() => {
      expect(screen.getByLabelText('Next')).toBeInTheDocument();
      expect(screen.getByLabelText('Previous')).toBeInTheDocument();
    });
    

[igordanchenko]

Here is a working example:

import { expect, test, vi } from "vitest";
import { act, render } from "@testing-library/react";

import App from "./App.tsx";

test("App test", () => {
  vi.useFakeTimers();

  try {
    const { queryByLabelText, getByLabelText, getByText } = render(<App />);

    act(() => {
      getByText("Open").click();
    });

    expect(queryByLabelText("Previous")).toBeInTheDocument();
    expect(queryByLabelText("Next")).toBeInTheDocument();
    expect(queryByLabelText("Close")).toBeInTheDocument();

    act(() => {
      getByLabelText("Close").click();
      vi.runAllTimers();
    });

    expect(queryByLabelText("Previous")).not.toBeInTheDocument();
    expect(queryByLabelText("Next")).not.toBeInTheDocument();
    expect(queryByLabelText("Close")).not.toBeInTheDocument();
  } finally {
    vi.useRealTimers();
  }
});

[virusxd521]

Thanks!

I'm new to testing but was asked to write test for the network call as well, the one that the library makes to fetch the images.
Can you please advice or should I open a new Q&A ticket for that?

[igordanchenko]

I'm new to testing but was asked to write test for the network call as well, the one that the library makes to fetch the images.

It makes little sense since unit tests don't make network calls.

[virusxd521]

Thanks! Why you have it in a try block?