React Summit

React Summit 2023

In this Workshop, the speaker covers various topics related to testing React components. They discuss the importance of testing the contract, behavior, and inputs/outputs of components. The use of React Testing Library and Jest module mocks is highlighted. The speaker also emphasizes the significance of testing user interaction events and external functions. Different testing approaches, best practices, and trade-offs are explored throughout the Workshop.

React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning? In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests. Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Designing Effective Tests With React Testing Library

Josh Justice

TestJS Summit

TestJS Summit - January, 2021

The speaker switched from Enzyme to the REACT Testing Library due to its encouragement of best practices, easier refactoring, and promotion of accessible code. The shift from class-based components to functional components in React is also highlighted. The benefits of the Testing Library include improved readability and user interaction simulation through DOM assertions, as well as its opinionated nature and focus on accessible code.

Testing Library's advantages over Enzyme for testing React: - Opinionated framework enforces best testing practices (test behavior, not integration) - Opinions on how to find elements ( role) encourages accessibility - jest-dom assertions lead to simple, readable tests - ESLint plugins help encourage best practices in real time - test output helps locate elusive elements There will be a few code examples, but this is largely a discussion (rather than a how-to). <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#react testing library