-
-
Notifications
You must be signed in to change notification settings - Fork 104
Open
Description
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:
- Create a new solid-js project
- Install Kobalte, vitest, @solid-js/testing-library, @testing-library/jest-dom, @testing-library/user-event, add
vitest.config.ts. - 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;- Add a
App.test.tsxfile 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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels