The
react-dom/client
package provides client-specific methods used for initializing an app on the client. Most of your components should not need to use this module.
The following methods can be used in client environments:
createRoot()
hydrateRoot()
Browser Support
React supports all modern browsers, although some polyfills are required for older versions.
Note
We do not support older browsers that don’t support ES5 methods or microtasks such as Internet Explorer. You may find that your apps do work in older browsers if polyfills such as es5-shim and es5-sham are included in the page, but you’re on your own if you choose to take this path.
Reference
createRoot()
createRoot(container[, options]);
Create a React root for the supplied
container
and return the root. The root can be used to render a React element into the DOM with
render
:
onRecoverableError
: optional callback called when React automatically recovers from errors.
identifierPrefix
: optional prefix React uses for ids generated by
React.useId
. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix used on the server.
The root can also be unmounted with
unmount
:
root.unmount();
Note:
createRoot()
controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when render is called. Later calls use React’s DOM diffing algorithm for efficient updates.
createRoot()
does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
Using
createRoot()
to hydrate a server-rendered container is not supported. Use
hydrateRoot()
instead.
hydrateRoot()
hydrateRoot(container, element[, options])
Same as
createRoot()
, but is used to hydrate a container whose HTML contents were rendered by
ReactDOMServer
. React will attempt to attach event listeners to the existing markup.
hydrateRoot
accepts two options:
onRecoverableError
: optional callback called when React automatically recovers from errors.
identifierPrefix
: optional prefix React uses for ids generated by
React.useId
. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix used on the server.
Note
React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
Is this page useful?
Edit this page
ReactDOMServer – React
ReactDOMServer
The
ReactDOMServer
object enables you to render components to static markup. Typically, it’s used on a Node server:
// ES modules import*as ReactDOMServer from'react-dom/server'; // CommonJS var ReactDOMServer =require('react-dom/server');
Render a React element to its initial HTML. Returns a stream with a
pipe(res)
method to pipe the output and
abort()
to abort the request. Fully supports Suspense and streaming of HTML with “delayed” content blocks “popping in” via inline
<script>
tags later. Read more
If you call
ReactDOM.hydrateRoot()
on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
let didError =false; const stream =renderToPipeableStream( <App/>, { onShellReady(){ // The content above all Suspense boundaries is ready. // If something errored before we started streaming, we set the error code appropriately. res.statusCode = didError ?500:200; res.setHeader('Content-type','text/html'); stream.pipe(res); }, onShellError(error){ // Something errored before we could complete the shell so we emit an alternative shell. res.statusCode =500; res.send( '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>' ); }, onAllReady(){ // If you don't want streaming, use this instead of onShellReady. // This will fire after the entire page content is ready. // You can use this for crawlers or static generation.
Streams a React element to its initial HTML. Returns a Promise that resolves to a Readable Stream. Fully supports Suspense and streaming of HTML. Read more
If you call
ReactDOM.hydrateRoot()
on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
let controller =newAbortController(); let didError =false; try{ let stream =awaitrenderToReadableStream( <html> <body>Success</body> </html>, { signal: controller.signal, onError(error){ didError =true; console.error(error); } } );
// This is to wait for all Suspense boundaries to be ready. You can uncomment // this line if you want to buffer the entire HTML instead of streaming it. // You can use this for crawlers or static generation:
This API depends on Web Streams. For Node.js, use
renderToPipeableStream
instead.
renderToNodeStream()
(Deprecated)
ReactDOMServer.renderToNodeStream(element)
Render a React element to its initial HTML. Returns a Node.js Readable stream that outputs an HTML string. The HTML output by this stream is exactly equal to what
ReactDOMServer.renderToString
would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
If you call
ReactDOM.hydrateRoot()
on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
Note:
Server-only. This API is not available in the browser.
The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like iconv-lite, which provides transform streams for transcoding text.
renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)
Similar to
renderToNodeStream
, except this doesn’t create extra DOM attributes that React uses internally, such as
data-reactroot
. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
The HTML output by this stream is exactly equal to what
ReactDOMServer.renderToStaticMarkup
would return.
If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use
renderToNodeStream
on the server and
ReactDOM.hydrateRoot()
on the client.
Note:
Server-only. This API is not available in the browser.
The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like iconv-lite, which provides transform streams for transcoding text.
renderToString()
ReactDOMServer.renderToString(element)
Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
If you call
ReactDOM.hydrateRoot()
on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
Note
This API has limited Suspense support and does not support streaming.
On the server, it is recommended to use either
renderToPipeableStream
(for Node.js) or
renderToReadableStream
(for Web Streams) instead.
renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)
Similar to
renderToString
, except this doesn’t create extra DOM attributes that React uses internally, such as
data-reactroot
. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use
renderToString
on the server and
ReactDOM.hydrateRoot()
on the client.
React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations.
In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute
tabindex
corresponds to the attribute
tabIndex
in React. The exception is
aria-*
and
data-*
attributes, which should be lowercased. For example, you can keep
aria-label
as
aria-label
.
There are a number of attributes that work differently between React and HTML:
checked
The
checked
attribute is supported by
<input>
components of type
checkbox
or
radio
. You can use it to set whether the component is checked. This is useful for building controlled components.
defaultChecked
is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted.
className
To specify a CSS class, use the
className
attribute. This applies to all regular DOM and SVG elements like
<div>
,
<a>
, and others.
If you use React with Web Components (which is uncommon), use the
class
attribute instead.
dangerouslySetInnerHTML
dangerouslySetInnerHTML
is React’s replacement for using
innerHTML
in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out
dangerouslySetInnerHTML
and pass an object with a
__html
key, to remind yourself that it’s dangerous. For example:
Since
for
is a reserved word in JavaScript, React elements use
htmlFor
instead.
onChange
The
onChange
event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because
onChange
is a misnomer for its behavior and React relies on this event to handle user input in real time.
selected
If you want to mark an
<option>
as selected, reference the value of that option in the
value
of its
<select>
instead.
Check out “The select Tag” for detailed instructions.
style
Note
Some examples in the documentation use
style
for convenience, but
using the
style
attribute as the primary means of styling elements is generally not recommended.
In most cases,
className
should be used to reference classes defined in an external CSS stylesheet.
style
is most often used in React applications to add dynamically-computed styles at render time. See also FAQ: Styling and CSS.
The
style
attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM
style
JavaScript property, is more efficient, and prevents XSS security holes. For example:
Note that styles are not autoprefixed. To support older browsers, you need to supply corresponding style properties:
const divStyle ={ WebkitTransition:'all',// note the capital 'W' here msTransition:'all'// 'ms' is the only lowercase vendor prefix };
functionComponentWithTransition(){ return<divstyle={divStyle}>This should work cross-browser</div>; }
Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g.
node.style.backgroundImage
). Vendor prefixes other than
ms
should begin with a capital letter. This is why
WebkitTransition
has an uppercase “W”.
React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string with the desired unit. For example:
// Result style: '10px' <divstyle={{height:10}}> Hello World! </div>
// Result style: '10%' <divstyle={{height:'10%'}}> Hello World! </div>
Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg
zoom
,
order
,
flex
). A complete list of unitless properties can be seen here.
suppressContentEditableWarning
Normally, there is a warning when an element with children is also marked as
contentEditable
, because it won’t work. This attribute suppresses that warning. Don’t use this unless you are building a library like Draft.js that manages
contentEditable
manually.
suppressHydrationWarning
If you use server-side React rendering, normally there is a warning when the server and the client render different content. However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client.
If you set
suppressHydrationWarning
to
true
, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don’t overuse it. You can read more about hydration in the
ReactDOM.hydrateRoot()
documentation.
value
The
value
attribute is supported by
<input>
,
<select>
and
<textarea>
components. You can use it to set the value of the component. This is useful for building controlled components.
defaultValue
is the uncontrolled equivalent, which sets the value of the component when it is first mounted.
All Supported HTML Attributes
As of React 16, any standard or custom DOM attributes are fully supported.
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the
camelCase
convention just like the DOM APIs:
<divtabIndex={-1}/>// Just like node.tabIndex DOM API <divclassName="Button"/>// Just like node.className DOM API <inputreadOnly={true}/>// Just like node.readOnly DOM API
These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.
Some of the DOM attributes supported by React include:
accept acceptCharset accessKey action allowFullScreen alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap
Similarly, all SVG attributes are fully supported:
Your event handlers will be passed instances of
SyntheticEvent
, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including
stopPropagation()
and
preventDefault()
, except the events work identically across all browsers.
If you find that you need the underlying browser event for some reason, simply use the
nativeEvent
attribute to get it. The synthetic events are different from, and do not map directly to, the browser’s native events. For example in
onMouseLeave
event.nativeEvent
will point to a
mouseout
event. The specific mapping is not part of the public API and may change at any time. Every
SyntheticEvent
object has the following attributes:
boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented number eventPhase boolean isTrusted DOMEvent nativeEvent voidpreventDefault() boolean isDefaultPrevented() voidstopPropagation() boolean isPropagationStopped() voidpersist() DOMEventTarget target number timeStamp string type
Note:
As of v17,
e.persist()
doesn’t do anything because the
SyntheticEvent
is no longer pooled.
Note:
As of v0.14, returning
false
from an event handler will no longer stop event propagation. Instead,
e.stopPropagation()
or
e.preventDefault()
should be triggered manually, as appropriate.
Supported Events
React normalizes events so that they have consistent properties across different browsers.
The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append
Capture
to the event name; for example, instead of using
onClick
, you would use
onClickCapture
to handle the click event in the capture phase.
boolean altKey number charCode boolean ctrlKey boolean getModifierState(key) string key number keyCode string locale number location boolean metaKey boolean repeat boolean shiftKey number which
The
key
property can take any of the values documented in the DOM Level 3 Events spec.
Focus Events
Event names:
onFocus onBlur
These focus events work on all elements in the React DOM, not just form elements.
Properties:
DOMEventTarget relatedTarget
onFocus
The
onFocus
event is called when the element (or some element inside of it) receives focus. For example, it’s called when the user clicks on a text input.
functionExample(){ return( <input onFocus={(e)=>{ console.log('Focused on input'); }} placeholder="onFocus is triggered when you click this input." /> ) }
onBlur
The
onBlur
event handler is called when focus has left the element (or left some element inside of it). For example, it’s called when the user clicks outside of a focused text input.
functionExample(){ return( <input onBlur={(e)=>{ console.log('Triggered because this input lost focus'); }} placeholder="onBlur is triggered when you click this input and then you click outside of it." /> ) }
Detecting Focus Entering and Leaving
You can use the
currentTarget
and
relatedTarget
to differentiate if the focusing or blurring events originated from
outside
of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree.
functionExample(){ return( <div tabIndex={1} onFocus={(e)=>{ if(e.currentTarget === e.target){ console.log('focused self'); }else{ console.log('focused child', e.target); } if(!e.currentTarget.contains(e.relatedTarget)){ // Not triggered when swapping focus between children console.log('focus entered self'); } }} onBlur={(e)=>{ if(e.currentTarget === e.target){ console.log('unfocused self'); }else{ console.log('unfocused child', e.target); } if(!e.currentTarget.contains(e.relatedTarget)){ // Not triggered when swapping focus between children console.log('focus left self'); } }} > <inputid="1"/> <inputid="2"/> </div> ); }
Form Events
Event names:
onChange onInput onInvalid onReset onSubmit
For more information about the onChange event, see Forms.
The
onMouseEnter
and
onMouseLeave
events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
Properties:
boolean altKey number button number buttons number clientX number clientY boolean ctrlKey boolean getModifierState(key) boolean metaKey number pageX number pageY DOMEventTarget relatedTarget number screenX number screenY boolean shiftKey
The
onPointerEnter
and
onPointerLeave
events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
Properties:
As defined in the W3 spec, pointer events extend Mouse Events with the following properties:
number pointerId number width number height number pressure number tangentialPressure number tiltX number tiltY number twist string pointerType boolean isPrimary
A note on cross-browser support:
Pointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of
react-dom
.
If your application requires pointer events, we recommend adding a third party pointer event polyfill.
Starting with React 17, the
onScroll
event
does not bubble
in React. This matches the browser behavior and prevents the confusion when a nested scrollable element fires events on a distant parent.
Properties:
number detail DOMAbstractView view
Wheel Events
Event names:
onWheel
Properties:
number deltaMode number deltaX number deltaY number deltaZ
ReactTestUtils
makes it easy to test React components in the testing framework of your choice. At Facebook we use Jest for painless JavaScript testing. Learn how to get started with Jest through the Jest website’s React Tutorial.
Note:
We recommend using React Testing Library which is designed to enable and encourage writing tests that use your components as the end users do.
For React versions <= 16, the Enzyme library makes it easy to assert, manipulate, and traverse your React Components’ output.
act()
mockComponent()
isElement()
isElementOfType()
isDOMComponent()
isCompositeComponent()
isCompositeComponentWithType()
findAllInRenderedTree()
scryRenderedDOMComponentsWithClass()
findRenderedDOMComponentWithClass()
scryRenderedDOMComponentsWithTag()
findRenderedDOMComponentWithTag()
scryRenderedComponentsWithType()
findRenderedComponentWithType()
renderIntoDocument()
Simulate
Reference
act()
To prepare a component for assertions, wrap the code rendering it and performing updates inside an
act()
call. This makes your test run closer to how React works in the browser.
Note
If you use
react-test-renderer
, it also provides an
act
export that behaves the same way.
For example, let’s say we have this
Counter
component:
it('can render and update a counter',()=>{ // Test first render and componentDidMount act(()=>{ ReactDOM.createRoot(container).render(<Counter/>);});const button = container.querySelector('button'); const label = container.querySelector('p'); expect(label.textContent).toBe('You clicked 0 times'); expect(document.title).toBe('You clicked 0 times');
// Test second render and componentDidUpdate act(()=>{ button.dispatchEvent(newMouseEvent('click',{bubbles:true}));});expect(label.textContent).toBe('You clicked 1 times'); expect(document.title).toBe('You clicked 1 times'); });
Don’t forget that dispatching DOM events only works when the DOM container is added to the
document
. You can use a library like React Testing Library to reduce the boilerplate code.
The
recipes
document contains more details on how
act()
behaves, with examples and usage.
mockComponent()
mockComponent( componentClass, [mockTagName] )
Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple
<div>
(or other tag if
mockTagName
is provided) containing any provided children.
Note:
mockComponent()
is a legacy API. We recommend using
jest.mock()
instead.
isElement()
isElement(element)
Returns
true
if
element
is any React element.
isElementOfType()
isElementOfType( element, componentClass )
Returns
true
if
element
is a React element whose type is of a React
componentClass
.
isDOMComponent()
isDOMComponent(instance)
Returns
true
if
instance
is a DOM component (such as a
<div>
or
<span>
).
isCompositeComponent()
isCompositeComponent(instance)
Returns
true
if
instance
is a user-defined component, such as a class or a function.
Returns
true
if
instance
is a component whose type is of a React
componentClass
.
findAllInRenderedTree()
findAllInRenderedTree( tree, test )
Traverse all components in
tree
and accumulate all components where
test(component)
is
true
. This is not that useful on its own, but it’s used as a primitive for other test utils.
Like
scryRenderedDOMComponentsWithClass()
but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
scryRenderedDOMComponentsWithTag()
scryRenderedDOMComponentsWithTag( tree, tagName )
Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching
tagName
.
findRenderedDOMComponentWithTag()
findRenderedDOMComponentWithTag( tree, tagName )
Like
scryRenderedDOMComponentsWithTag()
but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
Same as
scryRenderedComponentsWithType()
but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.
renderIntoDocument()
renderIntoDocument(element)
Render a React element into a detached DOM node in the document.
This function requires a DOM.
It is effectively equivalent to:
You will need to have
window
,
window.document
and
window.document.createElement
globally available
before
you import
React
. Otherwise React will think it can’t access the DOM and methods like
setState
won’t work.
Other Utilities
Simulate
Simulate.{eventName}( element, [eventData] )
Simulate an event dispatch on a DOM node with optional
eventData
event data.
Simulate
has a method for every event that React understands.
You will have to provide any event property that you’re using in your component (e.g. keyCode, which, etc…) as React is not creating any of these for you.
This package provides a 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 platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or jsdom.
You can 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: Learn more about it.
You can also traverse the output to find specific nodes and make assertions about them.
Create a
TestRenderer
instance with the passed React element. It doesn’t use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. Returns a TestRenderer instance.
TestRenderer.act()
TestRenderer.act(callback);
Similar to the
act()
helper from
react-dom/test-utils
,
TestRenderer.act
prepares a component for assertions. Use this version of
act()
to wrap calls to
TestRenderer.create
and
testRenderer.update
.
import{create, act}from'react-test-renderer'; import App from'./app.js';// The component being tested
// render the component let root; act(()=>{ root =create(<Appvalue={1}/>) });
// make assertions on root expect(root.toJSON()).toMatchSnapshot();
// update with some different props act(()=>{ root.update(<Appvalue={2}/>); })
// make assertions on root expect(root.toJSON()).toMatchSnapshot();
testRenderer.toJSON()
testRenderer.toJSON()
Return an object representing the rendered tree. This tree only contains the platform-specific nodes like
<div>
or
<View>
and their props, but doesn’t contain any user-written components. This is handy for snapshot testing.
testRenderer.toTree()
testRenderer.toTree()
Return an object representing the rendered tree. The representation is more detailed than the one provided by
toJSON()
, and includes the user-written components. You probably don’t need this method unless you’re writing your own assertion library on top of the test renderer.
testRenderer.update()
testRenderer.update(element)
Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree.
testRenderer.unmount()
testRenderer.unmount()
Unmount the in-memory tree, triggering the appropriate lifecycle events.
testRenderer.getInstance()
testRenderer.getInstance()
Return the instance corresponding to the root element, if available. This will not work if the root element is a function component because they don’t have instances.
testRenderer.root
testRenderer.root
Returns the root “test instance” object that is useful for making assertions about specific nodes in the tree. You can use it to find other “test instances” deeper below.
testInstance.find()
testInstance.find(test)
Find a single descendant test instance for which
test(testInstance)
returns
true
. If
test(testInstance)
does not return
true
for exactly one test instance, it will throw an error.
testInstance.findByType()
testInstance.findByType(type)
Find a single descendant test instance with the provided
type
. If there is not exactly one test instance with the provided
type
, it will throw an error.
testInstance.findByProps()
testInstance.findByProps(props)
Find a single descendant test instance with the provided
props
. If there is not exactly one test instance with the provided
props
, it will throw an error.
testInstance.findAll()
testInstance.findAll(test)
Find all descendant test instances for which
test(testInstance)
returns
true
.
testInstance.findAllByType()
testInstance.findAllByType(type)
Find all descendant test instances with the provided
type
.
testInstance.findAllByProps()
testInstance.findAllByProps(props)
Find all descendant test instances with the provided
props
.
testInstance.instance
testInstance.instance
The component instance corresponding to this test instance. It is only available for class components, as function components don’t have instances. It matches the
this
value inside the given component.
testInstance.type
testInstance.type
The component type corresponding to this test instance. For example, a
<Button />
component has a type of
Button
.
testInstance.props
testInstance.props
The props corresponding to this test instance. For example, a
<Button size="small" />
component has
{size: 'small'}
as props.
testInstance.parent
testInstance.parent
The parent test instance of this test instance.
testInstance.children
testInstance.children
The children test instances of this test instance.
Ideas
You can pass
createNodeMock
function to
TestRenderer.create
as the option, which allows for custom mock refs.
createNodeMock
accepts the current element and should return a mock ref object.
This is useful when you test a component that relies on refs.