Skip to content

Popover opens in the browser but not in testing #254

@nsaritzky

Description

@nsaritzky

Describe the bug
The Popover element renders correctly and opens in the browser, but it fails to open when using vitest and testing-library.

To Reproduce
See this repo for a reproduction. I made it by taking the following steps:

  1. Create a new solid-js project
  2. Install Kobalte, vitest, @solid-js/testing-library, @testing-library/jest-dom, @testing-library/user-event, add vitest.config.ts.
  3. Add a simple Popover to App.tsx:
import logo from "./logo.svg";
import styles from "./App.module.css";

const App: Component = () => {
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <Popover.Root>
          <Popover.Trigger>open</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content>
              <div>hello</div>
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </header>
    </div>
  );
};

export default App;
  1. Add a App.test.tsx file with the following:
import { render, screen } from "@solidjs/testing-library";
import userEvent from "@testing-library/user-event";
import { test, expect, beforeEach } from "vitest";
import "@testing-library/jest-dom";

import App from "./App";

test("Clicking 'open' sets aria-expanded to true", async () => {
  const user = userEvent.setup();
  render(() => <App />);
  const open = screen.getByRole("button", { name: "open" });
  await user.click(open);
  expect(open).toHaveAttribute("aria-expanded", "true");
});

test("Clicking 'open' opens a dialog", async () => {
  const user = userEvent.setup();
  render(() => <App />);
  const open = screen.getByRole("button", { name: "open" });
  await user.click(open);
  expect(screen.getByRole("dialog"));
});

Expected behavior
The popover opens in the browser and the tests pass. Instead, the tests fail on their expect lines.

Desktop (please complete the following information):

  • OS: macOS
  • Browser chrome, firefox

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions