Tabs in test code

[hautest]

The tabs I made work well in the browser.
and I try to testing tabs

const MockComponent = ({ defaultValue }: MockComponentProps) => {
  return (
    <Tap
      defaultValue={defaultValue}
      tapValue={[
        {
          contentValue: "fristValue",
          tapId: "tapId1",
          triggerValue: "firstTrigger",
        },
        {
          contentValue: "secondValue",
          tapId: "tapId2",
          triggerValue: "secondTrigger",
        },
      ]}
    />
  );
};

describe("UI Tap Component", () => {
  it("should render trigger text", () => {
    render(<MockComponent />);
    expect(screen.getByText("fristValue"));
    expect(screen.getByText("secondValue"));
  });

  it("should render content value", () => {
    render(<MockComponent />);
    fireEvent.click(screen.getByText("firstTrigger"));
    expect(screen.findByText("fristValue"));
  });
});

"should render trigger text" is success.
but "should render content value" is failed

TestingLibraryElementError: Unable to find an element with the text: fristValue. 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.

As I checked the Content of the test result

     <div
            aria-labelledby="radix-:r0:-trigger-tapId1"
            data-orientation="horizontal"
            data-state="inactive"
            hidden=""
            id="radix-:r0:-content-tapId1"
            role="tabpanel"
            tabindex="0"
          />
          <div
            aria-labelledby="radix-:r0:-trigger-tapId2"
            data-orientation="horizontal"
            data-state="inactive"
            hidden=""
            id="radix-:r0:-content-tapId2"
            role="tabpanel"
            tabindex="0"
          />

even though i clicked trigger value ("firstTrigger"), "data-state" of content is "inactive" (I expected data-state="active" .... )

[andy-hook]

Hi @hautest, fireEvent only handles low level events, your test is failing because it doesn't simulate a real click as the browser would. In the case of Tabs we use mouseDown internally so your code should be fireEvent.mouseDown.

A much better solution is to use the userEvent library which more closely mimics how the browser executes click events. This also avoids tying your tests too closely to the underlying implementation

Here's an example showing both approaches:

https://codesandbox.io/s/tabs-testing-click-zq1l3p?file=/src/Tabs.test.js

[hautest]

Thank you for the answer :)
mouseDown or userEvent seem like very good solutions !!
by the way, I made test code again after asking a question using waitFor

  it("should click event", async () => {
    render(<MockComponent />);
    fireEvent.click(screen.getByText("firstTrigger"));
    await waitFor(() => {
      expect(screen.getByText("firstTrigger")).toBeInTheDocument();
    });
  });

This test code was successful
What do you think of making code like this?

[andy-hook]

You should assert on Content and use userEvent.click but otherwise this would be fine, toBeInTheDocument is preferred I just didn't bother installing it for the sandbox.

[hautest]

Thank you again !!
Your help has helped me a lot :)