Skip to content
REact Selector Query (RESQ) - Query React components and children by component name or HTML selector
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs: update filtering docs to explain byState Apr 22, 2019
src chore(utils): code comment improvements May 14, 2019
tests feat(react-element): add ability to pass base element to query May 14, 2019
.eslintignore
.eslintrc.js init Mar 19, 2019
.gitignore feat(fragments): add function to build array of nodes when fragment Apr 10, 2019
.npmignore feat: reserve NPM pkg name Mar 19, 2019
.travis.yml
CHANGELOG.md chore: add changelog Mar 26, 2019
LICENSE.md
README.md
babel.config.js
index.js chore: add error handling for missing React instance May 14, 2019
package.json chore(release): v1.5.0 May 16, 2019
webpack.config.js
yarn.lock chore: add build badge. remove yarn install from ci Apr 4, 2019

README.md

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

You can’t perform that action at this time.