React Testing Library - Get by component type

Question

I've recently started upgrading my current React 16 and 17 projects to React 18. Consequently, I had to change my testing library from Enzym to React Testing Library (RTL). I came across a scenario where I can't find an equivalent. I'm using material-ui as the style library. In Enzyme I can query the component like this:

const wrapper = shallow(<InitialForm />);
const moreButton = wrapper.find(MoreMenu);
expect(moreButton.props().disabled).toBe(true);

I'm looking for something similar to this in the RTL. I tried the findByRole also but it does not give similar output.

Thanks in advance.

The RTL philosophy is to only test what the user can access. Props are [implementation details](https://kentcdodds.com/blog/testing-implementation-details). Test whether the input is disabled on the screen, not whether the prop is disabled. — ggorlen, Dec 28 '22 at 22:51

score 1 · Answer 1 · answered Dec 29 '22 at 08:51

As someone who also had to work with both I learned that RTL is very different conceptionally to enzyme. RTL is very accessibility driven which is why they encourage using high priority queries like getByRole. In your case I think you could use that to grab your button:

it('renders a disabled button', () => {
  const props = {
    ...componentProps,
  }

  render(<InitialForm {...props} />);
  const button = screen.getByRole('button');

  expect(button).toBeDisabled();
});

If you have multiple buttons in that component you can try passing a second options argument to find the exact button you want:

const button = screen.getByRole('button', { name: '<the text in the button>' });

It is worth noting that RTL discourages making prop assertions, instead they recommend writing tests that are user driven. The way I go about writing tests in RTL is to think and ask myself questions from the user's perspective like "what does the user see now?" or "what changed on the screen for the user?". So in your case I might add a click event on the button and assert that the onClick function that was assigned to it was not called

React Testing Library - Get by component type

1 Answers1