sgml/jsx-test

An easy way to test your React Components (`.jsx` files).

jsx-test

jsx-test is a tool that makes it easy to test '.jsx' files and includes some helpers for testing react components.

The main features of jsx-test are:

• Includes some helpers to simplify the test of React Components.
• Assertion methods to check the component renders the correct html based on the given props.
• Does NOT automock your dependencies.
• Is much simpler and faster than Jest.
• Works with mocha, jasmine or any other test framework.

Note: If you would like to require jsx files directly please follow these instructions

Install

npm install --save-dev jsx-test

Usage

simulateEvent

simulateEvent(ReactComponent element, String event, Object? eventData)
simulateEvent(DOMElement element, String event, Object? eventData)

Simulates an event on an element.

renderComponent

ReactElement renderComponent(ReactComponent comp, Object? props, any? children)

Renders a component w/ its props and children.

unmountComponent

Boolean unmountComponent(ReactComponent comp)

Unmount a component.

elementQuerySelector

DOMElement elementQuerySelector(ReactComponent comp, String selector)

Gets 1st child of comp using selector selector

elementQuerySelectorAll

DOMElement[] elementQuerySelectorAll(ReactComponent comp, String selector)

Gets children of comp using selector selector

stubComponent

ReactComponent stubComponent(ReactElement tag, any? children, boolean? showDataProps)
ReactComponent stubComponent(String tag, any? children, boolean? showDataProps)

Creates a stub component with tag and its children. If showDataProps is true, all props will be set in the rendered DOMElement in the form of data-<propKey> = <propValue>.

withContext

ReactComponent withContext(ReactComponent Component, Object context)

Wraps component in a context creating component.

assertRender

assertRender(ReactComponent Component, Object props, String expectedHTML)

Assert component render matches the expectedHTML. The expectedHTML regex conversion can be seen here.

assertNotRender

assertNotRender(ReactComponent Component, Object props, String unexpectedHTML)

The reverse of assertRender.

Example

Check our examples and tests.