0.0.8 • Published 8 years ago
react-shallowdom-helpers v0.0.8
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