big-design
big-design copied to clipboard
Use best practices in our test suites
Is your feature request related to a problem? Please describe.
There's a few best practices we have been shirking on. First of all we should be using the screen.*By
queries rather than using the const { findBy* } = render()
to get elements and whatnot. We also shouldn't be using container
to search for elements*. We should go through our test suites and clean up some of these inefficiencies.
*some conditions may apply
Describe the solution, feature, or improvement you'd like Pulling some common mistakes we initially made from Kent C. Dodds article.
// From this
const { container, getByText } = render(<Table {...} />);
const rows = container.querySelectorAll('tbody > tr');
const nextPageButton = getByText('Next page');
// ...
// To this
render(<Table {...} />);
const rows = await screen.findAllByRole('row');
const nextPageButton = screen.getByRole('button', { name: /next page/i });
// ....
Describe alternatives you've considered N/A
Additional context N/A