react-shallowdom-helpers

react-shallowdom-helpers

How to install

  npm install --save-dev react-shallowdom-helpers

Helpers

render

  import ShallowDOMHelpers from "react-shallowdom-helpers";

  const renderedComponent = ShallowDOMHelpers.render(<MyComponent>);

reRender

  let renderedComponent = ShallowDOMHelpers.render(<MyComponent>);
  ShallowDOMHelpers.click(renderedComponent, '.toggle-modal');

  renderedComponent = ShallowDOMHelpers.reRenderMountedInstance();
  // latest state is now set in the component

getMountedInstance

Return the current mounted instance. You have access to properties such as state in this object.

  ShallowDOMHelpers.getMountedInstance();

findAllByClass

It returns an array containing all the matching elements. If no element is found an empty array is returned.

  ShallowDOMHelpers.findAllByClass(renderedComponent, 'class-name');

findByClass

It returns the first element matching the class name.

  ShallowDOMHelpers.findByClass(renderedComponent, 'class-name');

findAllByTag

It returns an array containing all the matching elements. If no element is found an empty array is returned.

  ShallowDOMHelpers.findByTag(renderedComponent, 'p');

findByTag

It returns the first element matching the tag.

  ShallowDOMHelpers.findByTag(renderedComponent, 'p');

findById

It returns the first element matching the id.

  ShallowDOMHelpers.findById(renderedComponent, 'id-here');

getInnerChildren

  ShallowDOMHelpers.render(<Component>Inner Children</Component>);
  const innerChildren = ShallowDOMHelpers.getInnerChildren(renderedComponent);
  // Inner Children

getTextByClass(renderedComponent, 'class-name-here');

  const text = ShallowDOMHelpers.getTextByClass(renderedComponent, 'class-name-here');
  expect(text).to.eq('Text here');

getTextById

  const text = ShallowDOMHelpers.getTextById(renderedComponent, 'id-here');
  expect(text).to.eq('Text here');

getTextByTag

  const text = ShallowDOMHelpers.getTextByTag(renderedComponent, 'p');
  expect(text).to.eq('Text here');

click

  // by class name
  ShallowDOMHelpers.click(renderedComponent, '.className');

  // by id
  ShallowDOMHelpers.click(renderedComponent, '#id');

  // by tag
  ShallowDOMHelpers.click(renderedComponent, 'p');

change

  // by class name
  ShallowDOMHelpers.change(renderedComponent, '.className', '123');

  // by id
  ShallowDOMHelpers.change(renderedComponent, '#id', '123');

  // by tag
  ShallowDOMHelpers.change(renderedComponent, 'p', '123');

TestUtils

Return React's TestUtils.

  ShallowDOMHelpers.TestUtils;

Contributing

Create a fork of the project. Add the functionality you want as well as tests and submit a PR.

How to run the tests

  nvm use 5
  npm install
  npm test

TODO

• Simulate event payload when an event is trigger. (i.e Synthetic event)
• Add more matchers
• Refactor, refactor, refactor