JSPM

  • Created
  • Published
  • Downloads 1141065
  • Score
    100M100P100Q221511F
  • License MIT

REact Selector Query (resq) - Query React components and children by selector (component name)

Package Exports

  • resq

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (resq) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

resq (REact Selector Query) npm Build Status codecov

Requirements

  • React v16 or higher
  • Node 8 or higher

This library tries to implement something similar to querySelector and querySelectorAll, but through the React VirtualDOM. You can query for React composite elements or HTML elements.

Though the main use of this library is for E2E testing, it can be used in any almost any scenario

Example

import React from "react";
import ReactDOM from "react-dom";
import { waitToLoadReact, resq$, resq$$ } from "resq";

(async () => {
  try {
    await waitToLoadReact(2000)
    const myComponentInstance = resq$("MyComponent");
    console.log("component instance", myComponentInstance);
    /**
     * outputs:
     {
         name: 'MyComponent',
         node: null,
         isFragment: false,
         state: {},
         props: {},
         children: [
             {
                 name: 'div',
                 node: <div>MyComponent</div>
                 state: {},
                 props: {},
                 children: [
                     {
                         node: null,
                         props: 'MyComponent',
                         state: {},
                         name: null,
                         children: []
                     }
                 ],
             }
         ]
     }
     */

  } catch (error) {
    console.warn('resq error', error);
  }
})();
const MyComponent = () => (
  <div>MyComponent</div>
);

const App = () => (
  <div>
    <MyComponent />
  </div>
);

ReactDOM.render(<App />, document.querySelector("#root"));

Live Example

https://stackblitz.com/edit/resq

Installation

$ npm install --save resq

Or

$ yarn add resq

Usage