react-shallow-testutils

Replacement for TestUtils when using React's shallow rendering.

npm install react-shallow-testutils

React Versions

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

v3.0.1 / 2017-12-08

Update peerDependencies to allow React 16 Update dependencies

v3.0.0 / 2017-04-26

Updated to `react@15.5.4`

v2.0.0 / 2016-04-21

No changes from v2.0.0-beta1

v2.0.0-beta1 / 2016-04-09

Updated to react@15 #30 Updated ESLint and Babel Added npm run clean command

v1.0.0 / 2016-01-22

Updated to Babel 6 #15

v0.7.1 / 2015-12-07

Fixed forgetting to add export for findWithRef

v0.7.0 / 2015-12-07

Added findWithRef #13 (@rkovacevic)

v0.6.1 / 2015-11-17

Fixed findAllWithClass to not use String.includes #12

v0.6.0 / 2015-10-15

Contains a breaking change by removing Renderer

Removed Renderer as it's no longer needed with React 0.14 #10 Added getMountedInstance function to retreive the root component from renderer #10 Added pre-commit hook that checks linting and tests #9

v0.5.0 / 2015-10-08

Contains a breaking change by using React 0.14

Updated to React 0.14 #8 (plus help from @themouette #2)

0.4.0 / 2015-10-08

Contains a breaking change to Renderer

Changed render of Renderer to now take a function #6

0.3.0 / 2015-09-13

Add support for multiple class names @stefanbuck #4

0.2.1 / 2015-07-22

Fixed space in package.json entry point

0.2.0 / 2015-07-20

Added more documentation Added isComponentOfType