Replacement for TestUtils when using React's shallow rendering.
npm install react-shallow-testutils
| Version | React version |
|---|---|
| 0.4.0 | 0.13 |
| 0.5.0 | 0.14 |
| 2.0.0 | 15 |
| 3.0.0 | 15.5.4 |
| 3.0.1 | ^15.5.4 & ^16 |
All the functions are exported separately. This means you can pull in just the ones you want like this:
import {findWithType, findWithClass} from 'react-shallow-testutils';
findWithType(tree, …);However, if you want everything then you can do this:
import * as ShallowTestUtils from 'react-shallow-testutils';
ShallowTestUtils.findWithType(tree, …);Returns whether a ReactElement is of a particular type.
boolean isComponentOfType(ReactElement element, function componentClass | string tagName)import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { isComponentOfType } from "react-shallow-testutils";
function MyOtherComponent() {
return <div />;
}
function MyComponent() {
return <OtherComponent />;
}
const renderer = createRenderer();
const tree1 = renderer.render(<MyComponent />);
expect(isComponentOfType(tree1, OtherComponent)).toBe(true);
const tree2 = renderer.render(<MyOtherComponent />);
expect(isComponentOfType(tree2, "div")).toBe(true);Returns whether the supplied ReactElement is a DOM component or not
boolean isDOMComponent(ReactElement element)import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { isDOMComponent } from "react-shallow-testutils";
function MyComponent() {
return <div />;
}
const renderer = createRenderer();
const tree = renderer.render(<MyComponent />);
expect(isDOMComponent(tree)).toBe(true);Traverses the tree and returns all elements that satisfy the function test. A lot of the other functions are implemented in terms of this one.
array findAll(ReactElement tree, function test)import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { findAll } from "react-shallow-testutils";
function MyComponent() {
return (
<div>
<span />
<span />
<span />
</div>
);
}
const renderer = createRenderer();
const tree = renderer.render(<MyComponent />);
const spans = findAll(tree, element => element.type === "span");
expect(spans.length).toBe(3);Finds all instances of elements in the tree with a type that matches
type. This is like both React's scryRenderedDOMComponentsWithTag and scryRenderedComponentsWithType as you can supply a component class or a DOM tag.
array findAllWithType(ReactElement tree, function componentClass | string tagName)import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { findAllWithType } from "react-shallow-testutils";
function MyOtherComponent() {
return <div />;
}
function MyComponent() {
return (
<div>
<span />
<MyOtherComponent />
<span />
</div>
);
}
const renderer = createRenderer();
const tree = renderer.render(<MyComponent />);
expect(findAllWithType(tree, MyOtherComponent).length).toBe(1);
expect(findAllWithType(tree, "span").length).toBe(2);Find only one instance of an element in the tree with a type that matches
type. This is like both React's findRenderedDOMComponentWithTag and findRenderedComponentWithType as you can supply a component class or a DOM tag. It will throw an error if not exactly one instance is found.
ReactElement findWithType(ReactElement tree, function componentClass | string tagName)import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { findWithType } from "react-shallow-testutils";
function MyOtherComponent() {
return <div />;
}
function MyComponent() {
return (
<div>
<span />
<MyOtherComponent />
<span />
</div>
);
}
const renderer = createRenderer();
const tree = renderer.render(<MyComponent />);
expect(findWithType(tree, MyOtherComponent)).not.toThrow();
expect(findWithType(tree, "form")).toThrow();Finds all elements in the tree with a className prop that matches className. This is different to React's scryRenderedDOMComponentsWithClass in that it will check all components and not just DOM components.
You can pass a className like test-class.test-class--modified to find an element that has both classes.
array findAllWithClass(ReactElement tree, string className)import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { findAllWithClass } from "react-shallow-testutils";
function MyOtherComponent() {
return <div />;
}
function MyComponent() {
return (
<div>
<span className="my-span" />
<MyOtherComponent />
<span className="my-span" />
</div>
);
}
const renderer = createRenderer();
const tree = renderer.render(<MyComponent />);
expect(findAllWithClass(tree, "my-div").length).toBe(0);
expect(findAllWithClass(tree, "my-span").length).toBe(2);Find only one element in the tree with a className prop that matches className. This is different to React's findRenderedDOMComponentWithClass in that it will check all components and not just DOM components. It will throw an error if not exactly one instance is found.
You can pass a className like test-class.test-class--modified to find an element that has both classes.
ReactElement findWithClass(ReactElement tree, string className)import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { findWithClass } from "react-shallow-testutils";
function MyOtherComponent() {
return <div className="my-div" />;
}
function MyComponent() {
return (
<div>
<span className="my-span" />
<MyOtherComponent />
<span className="my-span" />
</div>
);
}
const renderer = createRenderer();
const tree = renderer.render(<MyComponent />);
expect(findWithClass(tree, "my-div")).not.toThrow();
expect(findWithClass(tree, "my-span")).toThrow(); // More than 1Find only one element in the tree with a ref prop that matches ref. This is only useful for a ref that has been defined as a string and not as a function.
ReactElement findWithRef(ReactElement tree, string ref)import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { findWithRef } from "react-shallow-testutils";
function MyComponent() {
return (
<div>
<span className="my-span" />
<div className="div-ref-class" ref="div-ref" />
<span className="my-span" />
</div>
);
}
const renderer = createRenderer();
const tree = renderer.render(<MyComponent />);
expect(findWithRef(tree, "div-ref").props.className).toBe("div-ref-class");