react/packages/react-test-renderer
Sebastian Markbåge 3c3696d554
Measure Updated ViewTransition Boundaries (#32653)
This does the same thing for `measureUpdateViewTransition` that we did
for `measureNestedViewTransitions` in
e3cbaffef0.
If a boundary hasn't mutated and didn't change in size, we mark it for
cancellation. Otherwise we add names to it. The different from the
CommitViewTransition path is that the "old" names are added to the
clones so this is the first time the "new" names.

Now we also cancel any boundaries that were unchanged. So now the root
no longer animates. We still have to clone them. There are other
optimizations that can avoid cloning but once we've done all the layouts
we can still cancel the running animation and let them just be the
regular content if they didn't change. Just like the regular
fire-and-forget path.

This also fixes the measurement so that we measure clones by adjusting
their position back into the viewport.

This actually surfaces a bug in Safari that was already in #32612. It
turns out that the old names aren't picked up for some reason and so in
Safari they looked more like a cross-fade than what #32612 was supposed
to fix. However, now that bug is even more apparent because they
actually just disappear in Safari. I'm not sure what that bug is but
it's unrelated to this PR so will fix that separately.
2025-03-17 21:38:13 -04:00
..
__tests__ Remove react-test-renderer/shallow export (#28497) 2024-03-26 18:04:47 -04:00
npm Don't minify symbols in production builds (#28881) 2024-04-20 11:23:46 -04:00
src Measure Updated ViewTransition Boundaries (#32653) 2025-03-17 21:38:13 -04:00
index.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
package.json Bump next prerelease version numbers (#31676) 2024-12-12 14:10:46 -05:00
README.md Update RTR readme (#28705) 2024-04-02 11:41:31 -04:00
shallow.js Remove react-test-renderer/shallow export (#28497) 2024-03-26 18:04:47 -04:00

react-test-renderer (DEPRECATED)

Deprecation notice

react-test-renderer is deprecated and no longer maintained. It will be removed in a future version. As of React 19, you will see a console warning when invoking ReactTestRenderer.create().

React Testing

This library creates a contrived environment and its APIs encourage introspection on React's internals, which may change without notice causing broken tests. It is instead recommended to use browser-based environments such as jsdom and standard DOM APIs for your assertions.

The React team recommends @testing-library/react as a modern alternative that uses standard APIs, avoids internals, and promotes best practices.

React Native Testing

The React team recommends @testing-library/react-native as a replacement for react-test-renderer for native integration tests. This React Native testing-library variant follows the same API design as described above and promotes better testing patterns.

Documentation

This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom.

Documentation: https://reactjs.org/docs/test-renderer.html

Usage:

const ReactTestRenderer = require('react-test-renderer');

const renderer = ReactTestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(renderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }

You can also use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: https://jestjs.io/blog/2016/07/27/jest-14.html.