Applying suggestion for table cell element query yields no results #334

Activity

1. ulisses-alves

   added

   bugSomething isn't workingSomething isn't working

   on Apr 20, 2021
2. brenocota-hotmart commented on Sep 20, 2022

   

   brenocota-hotmart

   on Sep 20, 2022

   Last edited by brenocota-hotmart

   Contributor

   More actions

   Hi @ulisses-alves how are you? :)

   Actually this doesn't work because it's using a regex to find the value..
   As there are two lines containing the text foo you would need to use single quotes or use getAll*

   screen.getByRole('cell', {
     name: 'foo'
   });

   OR

   screen.getAllByRole('cell', {
     name: /foo/i
   });

   If you update you HTML

   
3. smeijer commented on Sep 20, 2022

   

   smeijer

   on Sep 20, 2022

   Member

   More actions

   We could fix that I guess? We currently use regex matches, and the problem is that the regex results in more than one match. We could update the regex in those cases, and see if it would match a single element if it'd include the start and end modifiers, like /^foo$/i.

   Alternatively, we could fallback to string matchers, or even default to those. This is a good argument to use string matchers instead of regex.

   What do you think?
4. brenogcota commented on Sep 20, 2022

   

   brenogcota

   on Sep 20, 2022

   More actions

   @smeijer I think it would be interesting, although the way it works with regex is nice, maybe if we could add a clearer message that more than one match was found, the developer wouldn't be confused.
5. ldco2016 commented on Jul 26, 2023

   

   ldco2016

   on Jul 26, 2023

   Last edited by ldco2016

   More actions

   Well, I developed a test like this:

   import { render, screen } from "@testing-library/react";
   import user from "@testing-library/user-event";
   import App from "./App";
   
   test("can receive a new user and show it on a list", () => {
     render(<App />);
   
     const nameInput = screen.getByRole("textbox", { name: /name/i });
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const button = screen.getByRole("button");
   
     user.click(nameInput);
     user.keyboard("jane");
     user.click(emailInput);
     user.keyboard("jane@gmail.com");
   
     user.click(button);
   
     const name = screen.getByRole("cell", { name: "jane" });
     const email = screen.getByRole("cell", { name: "jane@gmail.com" });
   
     expect(name).toBeInTheDocument();
     expect(email).toBeInTheDocument();
   });

   And this test does not pass., but instead gives me an error saying: TestingLibraryElementError: Unable to find accessible element with the role "cell" and name "jane"

   Nevermind, this solved it for me:

   import { render, screen, waitFor } from "@testing-library/react";
   import user from "@testing-library/user-event";
   import App from "./App";
   
   test("can receive a new user and show it on a list", async () => {
     render(<App />);
   
     const nameInput = screen.getByRole("textbox", { name: /name/i });
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const button = screen.getByRole("button");
   
     await user.click(nameInput);
     await user.keyboard("jane");
     await user.click(emailInput);
     await user.keyboard("jane@gmail.com");
   
     await user.click(button);
   
     const name = screen.getByRole("cell", { name: "jane" });
     const email = screen.getByRole("cell", { name: "jane@gmail.com" });
   
     expect(name).toBeInTheDocument();
     expect(email).toBeInTheDocument();
   });
6. brenogcota commented on Jul 27, 2023

   

   brenogcota

   on Jul 27, 2023

   More actions

   @ldco2016 could you show us your App component?