Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popover opens in the browser but not in testing #254

Open
nsaritzky opened this issue Aug 24, 2023 · 1 comment
Open

Popover opens in the browser but not in testing #254

nsaritzky opened this issue Aug 24, 2023 · 1 comment

Comments

@nsaritzky
Copy link

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
@gBasil
Copy link

gBasil commented Mar 26, 2024

I'm running into the same issue. Calling the debug() function prints out the HTML as expected with the popover open, but queries don't return the popover contents.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants