isDOMComponent(instance)
For example, this test passes for me.
it('demonstrates the ReactComponent tree', function() {
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var MyComponent = require('../MyComponent.jsx');
var renderedTree = TestUtils.renderIntoDocument(<MyComponent />);
var renderedMyComponent = TestUtils.findRenderedDOMComponentWithClass(renderedTree, 'my-component')
expect(TestUtils.isDOMComponent(renderedMyComponent)).toBe(true);
});
isDOMComponent(instance)
scryRenderedDOMComponentsWithClass(
tree,
className
)
import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';import Counter from './Counter';
let container;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});
it('can render and update a counter', () => {
// Test first render and componentDidMount
act(() => { ReactDOM.render(<Counter />, container); }); 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(new MouseEvent('click', {bubbles: true})); }); expect(label.textContent).toBe('You clicked 1 times');
expect(document.title).toBe('You clicked 1 times');
});
findAllInRenderedTree(
tree,
test
)
isElementOfType(
element,
componentClass
)
const domContainer = document.createElement('div');
ReactDOM.render(element, domContainer);
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: 0};
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
handleClick() {
this.setState(state => ({
count: state.count + 1,
}));
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.handleClick}>
Click me
</button>
</div>
);
}
}
isElement(element)
isCompositeComponent(instance)
Recommend
React Test Utilities Reference isElementOfType()
React Test Utilities Reference isElement()
React Test Utilities Reference mockComponent()
React Test Utilities Reference act()
React Profiler API onRender Callback
React AJAX and APIs Example: Using AJAX results to set local state
React.Component Class Properties defaultProps
React.Component Other APIs forceUpdate()
React.Component Other APIs setState()
React.Component Reference UNSAFE_componentWillUpdate()
React.Component Reference UNSAFE_componentWillReceiveProps()
React.Component Reference UNSAFE_componentWillMount()
React.Component Reference componentDidCatch()
React.Component Reference static getDerivedStateFromError()
React.Component Reference getSnapshotBeforeUpdate()
React.Component Reference static getDerivedStateFromProps()
React.Component Reference shouldComponentUpdate()
React.Component Reference componentWillUnmount()
React.Component Reference componentDidUpdate()
React.Component Reference componentDidMount()
React.Component Reference constructor()
React.Component Reference render()
Render Props Caveats Be careful when using Render Props with React.PureComponent
React Render Props Using Props Other Than render
React Render Props Use Render Props for Cross-Cutting Concerns
React Hooks FAQ Performance Optimizations How to read an often-changing value from useCallback?
React Hooks FAQ Performance Optimizations How to avoid passing callbacks down?
React Hooks FAQ Performance Optimizations Are Hooks slow because of creating functions in render?
React Hooks FAQ Performance Optimizations How to create expensive objects lazily?
React Hooks FAQ Performance Optimizations How to memoize calculations?
React Hooks FAQ Performance Optimizations How do I implement shouldComponentUpdate?
React Hooks FAQ Performance Optimizations What can I do if my effect dependencies change too often?
React Hooks FAQ From Classes to Hooks How can I measure a DOM node?
React Hooks FAQ From Classes to Hooks Is there something like forceUpdate?
React Hooks FAQ From Classes to Hooks How do I implement getDerivedStateFromProps?
React Hooks FAQ From Classes to Hooks Why am I seeing stale props or state inside my function?
React Hooks FAQ From Classes to Hooks How to get the previous props or state?
React Hooks FAQ From Classes to Hooks Should I use one or many state variables?
React Hooks FAQ From Classes to Hooks Is there something like instance variables?
React Hooks FAQ Adoption Strategy How to test components that use Hooks?
React Forms Controlled Input Null Value
React Forms Handling Multiple Inputs