Scribd
Upload
4 views2 pages

2 - Testing Components

The document discusses testing React components by focusing on rendering and user interactions. It provides an overview of setup files, queries, matchers and how to simulate user interactions for testing purposes.

Uploaded by

Surendher Raja
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views2 pages

2 - Testing Components

The document discusses testing React components by focusing on rendering and user interactions. It provides an overview of setup files, queries, matchers and how to simulate user interactions for testing purposes.

Uploaded by

Surendher Raja
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

The Complete React Testing Course 1

Testing Components
Summary
• When testing React components, there are two major concerns we should test:
rendering and responding to user actions.

• Aim to write tests that are maintainable, robust, and trustworthy.

• To ensure your tests are robust, test the behavior (what the application does), not the
implementation (how it is done). This approach ensures that tests remain valid even
when the implementation changes, as long as the behavior stays consistent.

• Don't test styles! Visual tests can be fragile. A tiny style change can fail a test. Plus,
passing visual tests don't guarantee that our application looks good.

• Setup les are loaded before each test le. They are useful for setting up the testing
environment.

• user-event is a companion library to React Testing Library that simulates user


interactions.

Copyright 2024 Code with Mosh [Link]


fi
fi
The Complete React Testing Course 2

Useful Functions

Types of Queries
getBy
queryBy
findBy

Query Variations
ByRole
ByText
ByPlaceholderText
ByTestId

Useful Matchers
toBeChecked()
toBeDisabled()
toBeEmptyDOMElement()
toBeInTheDocument()
toHaveAttribute()
toHaveTextContent()

Simulating User Interactions


const user = [Link]()
await [Link](element)
await [Link](element, ‘a’)

Copyright 2024 Code with Mosh [Link]

You might also like