DEV Community

Discussion on: Enzyme or react-testing-library and why?

 
lacasa profile image
𝙻𝚊𝚌𝚊𝚜𝚊

You'll find the way, no worries...

I ended up using tons of data-testid in the mocks (I try really hard to avoid them in the real code).

Thread Thread
 
yuritoledo profile image
Yuri Toledo

I wanna try to avoid using it too, but how I use 3rd party components, I can't use htmlFor for example, and I rarely use placeholder

Thread Thread
 
lacasa profile image
𝙻𝚊𝚌𝚊𝚜𝚊 • Edited

If you are using 3rd party components for inputs/labels, that's perfect! You don't need to test that whatever they do internally works, you just need to test that your component does what it needs, so you can mock them.

jest.mock('ui-library/Input', () =>
  jest.fn(({value, handleChange}) => <input data-testid="input" onChange={handleChange} value={value} />)
);

it('should do magic', () => {
  const {getByTestId} = render(<Component />);

  // we test that the component is rendering
  expect(getByTestId('input').value).toBeInTheDocument();

  // we test that the component shows the proper value
  expect(getByTestId('input').value).toEqual(oldValue);

  // we test that Component can handle change events
  // (we don't care how Input does that internally)
  fireEvent.change(getByTestId('input'), newValue);
  expect(getByTestId('input').value).toEqual(newValue);
});

The code might have errors, but the I think the idea is clear enough!

Thread Thread
 
yuritoledo profile image
Yuri Toledo

Yeah, its clear, thank you bro

Thread Thread
 
nersoh profile image
Nelson Henrique • Edited

"And I hate the fact that I cant find a comp by id or name hehe"

I don't know if you already figured out how to do it, but I actually can by doing, for example:

const { container } = render(Component);
expect(container.querySelector("#myid")).not.toBeNull();

Thread Thread
 
lacasa profile image
𝙻𝚊𝚌𝚊𝚜𝚊 • Edited

You can create your custom selectors like this:

import { queryByAttribute, render } from '@testing-library/react';

const getByName = queryByAttribute.bind(null, 'name');

it('should...', () => {
  const { container } = render(<Component />);
  expect(getByName(container, 'the-name').toEqual(...)
})

I have some custom selectors created in a utils file (name, type, id...).