React Testing Components: Difference between revisions
Jump to navigation
Jump to search
Created page with "=Introduction= Guiding principle for testing is<br> <br> '''Testing Exactly what you are trying to test and nothing more''' <br> =Testing Rendering= ==React Testing Library==..." |
|||
| Line 10: | Line 10: | ||
* Encourages rendering components to DOM nodes, | * Encourages rendering components to DOM nodes, | ||
* Making asserts against DOM nodes | * Making asserts against DOM nodes | ||
<br> | |||
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 | 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 | ||
<syntaxhighlight lang="js"> | <syntaxhighlight lang="js"> | ||
| Line 20: | Line 20: | ||
r.getByTestId('target') | r.getByTestId('target') | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=Testing Component Events= | =Testing Component Events= | ||
=Testing States and Effects= | =Testing States and Effects= | ||
Revision as of 02:17, 10 July 2021
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')