rst

react-shallow-testutils

Replacement for TestUtils when using React's shallow rendering

Showing:

Popularity

Downloads/wk

8.3K

GitHub Stars

98

Maintenance

Last Commit

2yrs ago

Contributors

6

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-shallow-testutils

Replacement for TestUtils when using React's shallow rendering.

NPM

npm install react-shallow-testutils

React Versions

VersionReact version
0.4.00.13
0.5.00.14
2.0.015
3.0.015.5.4
3.0.1^15.5.4 & ^16

Usage

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, …);

isComponentOfType

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);

isDOMComponent

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);

findAll

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);

findAllWithType

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);

findWithType

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();

findAllWithClass

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);

findWithClass

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 1

findWithRef

Find 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");

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial