React has become one of the main frameworks for building web applications. While not completely “unit testing”, testing web components in isolation has the benefits of quick feedback and confidence in quality. In this packed 1-day intro, we’ll learn how we test React components.
In this 1-day hands-on workshop, we’ll introduce React component testing, with Jest and the React Testing library, and use them for isolated component testing in JavaScript / TypeScript. Attendees will practice the needed techniques to write, plan, design and write tests for components.
We’ll see how to write, run and debug React tests. We’ll go over elements and expectations and talk about the async and dynamic aspects of the operation.
On top of that, we’ll discuss where component tests fit into testing work – How these tests fit within web and unit tests, and when they can be replaced with simpler tests. We’ll also see how to run the tests in CI environment.
The exercises are in JavaScript / Typescript. Attendees will download the exercise from GitHub before the session starts.
Workshop total length: 1 day
Remote and on-site options.
Audience
The workshop is intended for front-end, full-stack developers and team leaders.
Workshop goals
Following the workshop, attendees will be able to:
- Describe the benefits and challenges of component testing
- Plan and design the component tests.
- Design React component code and sub-components to be testable and easy to change.
- Write and debug components using the React Testing Library.
- Use tooling for mocking external calls
- Run the tests in Continuous Integration systems
Workshop agenda
- The place of DOM component tests in testing
- Testing React components
- Finding elements
- Using the Jest-DOM assertions
- Using User Event library to invoke events
- Testing event invocation
- Debugging tests
- Mocking external API calls at function levels
- Handling async code scenarios
- Running in Continuous integration system
Prerequisites
- Basic understanding of test automation and test frameworks
- React development knowledge
- Attendees need a laptop with an IDE with toolset (e.g. VS Code, node, npm).
For more questions:
Contact Us!