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

React Day Berlin

React Day Berlin 2024

My talk is called Beyond Testing Library, Testing React Libraries or Library-like Code. We want to optimize code by minimizing re-renders, avoiding tearing, and ensuring granular rendering. React Testing Library may not always be the right tool for libraries or library-like code. We test for synchronous results, but there are cases where unwanted re-renders and inconsistencies can occur. We need to avoid flaky tests and bug propagation. The new Testing Library React Render Stream library simplifies testing by replacing complex wrappers and assertions. We test for multiple independent components and ensure correct re-rendering. We introduce Suspense and DOM snapshotting to test granular rendering. The final test provides increased confidence and meets all special requirements.

When it comes to testing library code, the (usually amazing!) "Testing Library" approach quickly hits its limitations: We often need to test hot code paths to ensure additional guarantees, such as a specific order of DOM changes or a particular number of renders. As soon as we start adding Suspense to the picture, it even gets almost philosophical: How do we count a render that immediately suspended, and how do we distinguish it from a "committed" render? How do we know which parts of the Component tree rerendered? In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method. After testing this approach internally for a year, we have released it in a library that we want to present to the world. I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions: How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect. We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.

Beyond React Testing Library: Testing React Libraries (and library-like code)

Lenz Weber-Tronic

TestJS Summit

TestJS Summit 2023

The Talk discusses the differences between Cypress component testing and React Testing Library (RTL). It highlights the benefits of using Cypress Component Testing, such as easier handling of complex components and a more stable testing experience in CI. The comparison between SignOn and Jest focuses on low-level spying and mocking capabilities. The comparison between Cypress Intercept and Mock Service Worker (MSW) examines their network spy and mocking capabilities. The Talk also emphasizes the superior developer experience and observability provided by Cypress component testing compared to RTL.

CCT vs RTL talks about the similarities between the tools, the differences, compares the ways of doing the same things with the tools, and finally gives a developer experience comparison demo.

Cypress Component Testing vs React Testing Library

Murat K Ozcan

React Finland

React Finland 2021

My unpopular opinion is that testing is ... important. How do you test your React Native apps? In this presentation I will show how to run full integrations tests using Cypress while the RN app is running in the browser. This method can cover most of the application's code and be effective at finding logical errors and mistakes when calling the server APIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#react testing