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.

Answer 1

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