What is “Testing”?

Manual Testing Automated Testing

Write Code <> Preview & Test

Code that tests your code
in Browser

Very important: You see what You test the individual building
your users will see blocks of your app

Error-prone: It’s hard to test all

Very technical but allows you to
possible combinations and
test ALL building blocks at once
scenarios
 Different Kinds Of Automated Tests

Unit Tests Integration Tests End-to-End (e2e) Tests

Test the individual Test complete scenarios in

Test the combination of
building blocks (functions, your app as the user
multiple building blocks
components) in isolation would experience them

Projects typically contain

Projects typically contain a Projects typically contain
dozens or hundreds of unit
couple of integration tests only a few e2e tests
tests

The most common / Also important, but focus Important but can also be
important kind of test on unit tests in most cases done manually (partially)
 What To Test

What? How?

Test success and error cases, also

Test the different building blocks
test rare (but possible) results

Unit Tests: The smallest building

blocks that make up your app
 Required Tools & Setup

We need a tool for running our tests and We need a tool for “simulating” (rendering)
asserting the results our React app / components

Jest React Testing Library

Both tools are already set up for you when using create-react-app
 Writing Tests – The Three “A”s

Arrange Set up the test data, test conditions and test environment

Act Run logic that should be tested (e.g. execute function)

Assert Compare execution results with expected results