Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yahoo/jsx-test
An easy way to test your React Components (`.jsx` files).
https://github.com/yahoo/jsx-test
javascript react react-components testing web
Last synced: 3 days ago
JSON representation
An easy way to test your React Components (`.jsx` files).
- Host: GitHub
- URL: https://github.com/yahoo/jsx-test
- Owner: yahoo
- License: other
- Created: 2015-01-21T22:08:32.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-03-21T05:03:37.000Z (over 1 year ago)
- Last Synced: 2024-11-01T00:22:37.119Z (15 days ago)
- Topics: javascript, react, react-components, testing, web
- Language: JavaScript
- Size: 2.68 MB
- Stars: 27
- Watchers: 13
- Forks: 17
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jsx-test
[](https://www.npmjs.com/package/jsx-test)
[](https://travis-ci.org/yahoo/jsx-test)
[](https://david-dm.org/yahoo/jsx-test)
[](https://david-dm.org/yahoo/jsx-test#info=devDependencies)
`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](https://babeljs.io/docs/setup/)
## Install
```
npm install --save-dev jsx-test
```
## Usage
### simulateEvent
```js
simulateEvent(ReactComponent element, String event, Object? eventData)
simulateEvent(DOMElement element, String event, Object? eventData)
```
Simulates an `event` on an `element`.
### renderComponent
```js
ReactElement renderComponent(ReactComponent comp, Object? props, any? children)
```
Renders a component w/ its props and children.
### unmountComponent
```js
Boolean unmountComponent(ReactComponent comp)
```
Unmount a component.
### elementQuerySelector
```js
DOMElement elementQuerySelector(ReactComponent comp, String selector)
```
Gets 1st child of `comp` using selector `selector`
### elementQuerySelectorAll
```js
DOMElement[] elementQuerySelectorAll(ReactComponent comp, String selector)
```
Gets children of `comp` using selector `selector`
### stubComponent
```js
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- = `.
### withContext
```js
ReactComponent withContext(ReactComponent Component, Object context)
```
Wraps component in a context creating component.
### assertRender
```js
assertRender(ReactComponent Component, Object props, String expectedHTML)
```
Assert component render matches the `expectedHTML`. The `expectedHTML` regex conversion can be seen [here](https://github.com/yahoo/jsx-test/blob/master/test/assertRender.test.js).
### assertNotRender
```js
assertNotRender(ReactComponent Component, Object props, String unexpectedHTML)
```
The reverse of `assertRender`.
## Example
Check our [examples](https://github.com/3den/jsx-test/tree/master/example) and [tests](https://github.com/3den/jsx-test/tree/master/test).