react-get-element

To get the HTML DOM Element in the path string from 'React Component'.

• Like jquery|.get()
• In easy-to-understand
• It can be obtained in the path, such as the div.span.p and table:class1.tbody
• Recommended be used in React Component of test(bdd)

Installation

npm install react-get-element --save
 
import getElement from 'react-get-element';

Usage

• The path in the tag, id or class name
• Symbols
  • Hierarchy with a .
  • # to id
  • : to class name

Tags specified

export default class Foo extends React.Component {
  render() {
    return (
      <div id="root">
        <div id="main">
          <div className="class1">
            <span>span-text</span>
          </div>
          <p className="class2">test</p>
          <p>p-text1</p>
          <p>p-text2</p>
        </div>
      </div>
    );
  }
}
 
const component = ReactTestUtils.renderIntoDocument(<Foo />);
const elements = ReactTestUtils.findAllInRenderedTree(component, c => c.id ? c.id === 'main' : false);
 
getElement(elements, "div#main.div:class1");
// => div element
 
getElement(elements, "div#main.p:class2");
// => p element
 
getElement(elements, "div#main.p:class2");
// => p element
 
getElement(elements, "div.span");
// => span element
 
getElement(elements, "svg");
// => undefined

Features

• It returns an array when there is more than one
• If there is something..

Development

• Check in the npm run at the project root directory.

npm install
npm run build
 
npm run test
npm run lint

LICENSE

MIT