big-design icon indicating copy to clipboard operation
big-design copied to clipboard

Use best practices in our test suites

Open chanceaclark opened this issue 3 years ago • 0 comments

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

chanceaclark avatar Oct 13 '21 15:10 chanceaclark