React Testing Components

Introduction

Guiding principle for testing is

Testing Exactly what you are trying to test and nothing more

Testing Rendering

React Testing Library

React Testing Library is one of the most well known. They say,

• The more your tests resemble the way the software is used, the more confidence they can give you.
• Encourages rendering components to DOM nodes,
• Making asserts against DOM nodes

It's API tries to encourage tests to represent how the software is used by the user. For example these tests focus on how the user might access the screen, by label, by text

const r = render(<Message content="Some Stuff" isImportant={true} />);
r.getByLabelText('First Name')
r.getByText('2017-5-13')
r.getByTitle('introduction')
// Frown upon because as a user id are not visible but...
r.getByTestId('target')

Copy