This is the child article of ReactTestUtils - Tutorial. In this article, I will explain how to Check Class Name and Tag with examples.

Example

In this example state, properties defined. Input field is having myInput class
import React from 'react';
import SubRoot from './sub-root'

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

    this.state = {
      name: 'sample 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;

Verify Class name

Get className property of the element.
it('check className', function () {
    var root = TestUtils.renderIntoDocument(<Root/>);
    var inputElm = TestUtils.findRenderedDOMComponentWithClass(root, 'myInput');
    expect(inputElm.className.match(/\bmyInput\b/)).toExist();
});

Verify Property Value 

Get props of the element
it('check properties', function () {
    var root = TestUtils.renderIntoDocument(<Root/>);
    var subRoot = TestUtils.findRenderedComponentWithType(root, SubRoot);
    expect(subRoot.props.myProp).toEqual("my prop value");
});

Verify State Value

Get state of the element
it('check state', function () {
    var root = TestUtils.renderIntoDocument(<Root/>);
    var rootElm = TestUtils.findRenderedComponentWithType(root, Root);
    expect(rootElm.state.name).toEqual("sample name");
});

8 comments:

  1. I regularly visit your site and find a lot of interesting information geometry dash

    ReplyDelete
  2. I feel it interesting, your post gave me a new perspective helix jump! I have read many other articles about the same topic, but your article convinced me!

    ReplyDelete
  3. I am very happy after visiting your website with very useful information. I am from one of the digital marketing agency... To visit my agency click on link Visitdigitalguru

    ReplyDelete
  4. 192.168.l.254.254 is a private IP address that comes under C class IP address. 192.168.l.254 IP address most commonly used private address as the default gateway IP address by many leading router brands.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts