Vitest browser says that things are not visible

[chrisolsen]

For some reason they initial issue[1] that was posted started to work, however I am now seeing the following, which is something I have encountered in other tests. When I run the browser test I can see the things are visible in the browser it is running things within.

  it.only("can select a radio button and continue to next page", async () => {
    const { getByText, getByRole } = render(<PublicFormTestComponent />);

    const radios = getByRole("radio");

    // Wait for radio items to be present
    await vi.waitFor( () => {
      expect(radios.length).toBe(2);
    });

    // Select the Recipient radio button
    await radios.first().click();

    // Click continue button
    const continueButton = getByRole("button").getByText("Continue");
    await continueButton.click();

    // Should navigate to children page (for Recipient role)
    const nextHeader = getByText("Support order details");
    await vi.waitFor(() => {
      expect(nextHeader).toBeTruthy();
    });
  });

1. It was saying that strict mode didn't allow more than one item to be returned.

[macarie]

Can you provide a reproduction? Otherwise it's impossible to tell what's wrong from this.

As a rule of thumb, make sure you can actually interact with the input element that's logged. If the input is hidden and it's only controlled by something else (e.g., a wrapping label), this is the expected behavior and you should click on that element instead.

[chrisolsen]

Thanks, I will keep that in mind.

Here is the repo https://github.com/GovAlta/ui-components/tree/chris/public-form-reattempt and here is the failing test https://github.com/GovAlta/ui-components/blob/chris/public-form-reattempt/libs/react-components/specs/public-form.browser.spec.tsx#L296