This is the child article of ReactTestUtils - Tutorial. In this article, I will explain how to find element with examples.
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; }); }
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.
ReplyDelete