Applying suggestion for table cell element query yields no results

[ulisses-alves]

Bug Report 🐛

Hi there
I have a simple table structure where I wanted to select its first cell. While applying a better selector suggested by the application, it no longer selects the element.

To Reproduce ✔️

1. Enter the following HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo</td>
      <td>foo@bar.foo</td>
    </tr>
  </tbody>
</table>

2. Enter the following selector

screen.getByText('foo')

3. The application then suggests

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

4. Apply the aforementioned suggestion
5. No element is found

Expected behavior 🤔

The element <td>foo</td> should be selected

Your Environment 💻

• browser: Firefox
• os: Windows

[brenocota-hotmart]

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

[smeijer]

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?

[brenogcota]

@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.

[ldco2016]

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();
});

[brenogcota]

@ldco2016 could you show us your App component?