ReactTestUtils - Find Element By Component, Class, Tag, Id

This is the child article of ReactTestUtils - Tutorial. In this article, I will explain how to find element with examples.

Examples - Source Code

Example

This is sample example.

import React from 'react';
import SubRoot from './sub-root'

class Root extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: ''
    };
  }

  render() {
    return (
      <div>
        <h1>Hello World!!</h1>

        <p>
          Please input your name here:
          <input className="myInput"
            onChange={this.handleChange}
            value={this.state.name}
          />
        </p>
        <SubRoot/>
        <p>Hello, {this.state.name} </p>
      </div>
    );
  }

  handleChange(e) {
    var newName = e.target.value();

    this.setState({
      name: newName
    });
  }
}

export default Root;

By Tag

scryRenderedDOMComponentsWithTag

Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching tagName.

findRenderedDOMComponentWithTag

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.

it('find element with tag', function () {
    var root = TestUtils.renderIntoDocument(<Root/>);
    // scryRenderedDOMComponentsWithTag
    var spanElm = TestUtils.scryRenderedDOMComponentsWithTag(root, 'span');
    expect(spanElm.length).toEqual(0);
    var h1Elm = TestUtils.scryRenderedDOMComponentsWithTag(root, 'h1');
    expect(h1Elm.length).toEqual(1);
    // findRenderedDOMComponentWithTag
    var h1Elm = TestUtils.findRenderedDOMComponentWithTag(root, 'h1');
    expect(h1Elm).toExist();
});

By Class

scryRenderedDOMComponentsWithClass

Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching className.

findRenderedDOMComponentWithClass

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.

it('find element with class', function () {
    var root = TestUtils.renderIntoDocument(<Root/>);
    // scryRenderedDOMComponentsWithClass
    var inputElmArr = TestUtils.scryRenderedDOMComponentsWithClass(root, 'myInput');
    expect(inputElmArr.length).toEqual(1);
    // findRenderedDOMComponentsWithClass
    var inputElm = TestUtils.findRenderedDOMComponentWithClass(root, 'myInput');
    expect(inputElm).toExist();
});

By Component

scryRenderedComponentsWithType

Finds all instances of components with type equal to componentClass.

findRenderedComponentWithType

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.

it('find element by Component', function () {

it('find element by Component', function () {
    var root = TestUtils.renderIntoDocument(<Root/>);
    // scryRenderedComponentsWithType
    var compArr = TestUtils.scryRenderedComponentsWithType(root, SubRoot);
    expect(compArr.length).toEqual(1);
    // findRenderedComponentsWithType
    var comp = TestUtils.findRenderedComponentWithType(root, SubRoot);
    expect(comp).toExist();
});

By Id

There is no function to get React element by Id. We can use findAllInRenderedTree to Component by Id.

function scryRenderedDOMComponentsWithId(tree, id) {
  return TestUtils.findAllInRenderedTree(tree, function(inst) {
    return TestUtils.isDOMComponent(inst) && inst.id === id;
  });
}

9 comments:

unknown13 August 2020 at 00:17
Different coding style are here, because i know you could start to get learning this method where https://www.uk-dissertation.com/. Different learning style are created whenever we need to learn this learning style and choose it with different style which is easy for us.
Whatsgaming17 December 2020 at 07:41
Thank you.very useful information.
Whatsgaming
Denniel21 January 2021 at 11:13
I've always wanted to write great papers and get excellent grades, but I'm not good at writing essays and similar works. But the expert writers were able to help me and now everything is fine.
AlanBarlow24 March 2021 at 23:29
Wanted to try this for long just couldn't able to find out how. Need a logo for your business just check below:
Custom Logo Design
Susan14 April 2021 at 20:41
This is a list with all the possible Trait Cheats that are in The Sims 4 and their expansions and game packs. These Cheat Codes are all tested and working! Sims 4 cheats
LasseNielsen30 July 2021 at 02:54
Try not to burn through a ton of time for exhausting examination and moronic subjects. I have one guidance simply utilize the best paper composing administration http://essaylab.co.uk/. I generally utilized during my college period and never felt apprehensive about grades. Examining can be such a great deal simpler when you know who you ought to request help.
Haris14 September 2021 at 00:49
Great post,

law dissertation Writers
james7 January 2022 at 02:39
Slot machines have a unique combination of features. They are easy to play, they allow players to win many times over with a single spin and always have the chance of an exciting jackpot payout that keeps players coming back again and again in https://exycasinos.in/slots/. In fact, some players spend as much as 90% of their time on profitable slots India.
Daniel Lisa27 July 2022 at 00:16
A great appreciation to you for sharing the code of finding the element by class, component and tag but I am much interested in coding, especially in react. Even I always take the help of assignment writing services to complete assignments of programming.

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary