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!
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 placeholderIf 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.
The code might have errors, but the I think the idea is clear enough!
Yeah, its clear, thank you bro
"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();
You can create your custom selectors like this:
I have some custom selectors created in a utils file (name, type, id...).