##Legit Tests
This is a super friendly testing library for React, inspired by express middleware, it's easily extendable. Why did I make this when you can use React's Test Utils? Because who likes typing out scryRenderedDOMComponentsWithTag and the other method names on there. Not only that, but setting up the render process is also a hassle.
###Install
npm install legit-tests --save
##Example
import Test from 'legit-tests'
//or
import Test from 'legit-tests/no-dom' //don't include jsdom
import { expect } from 'chai'
import sinon from 'sinon'
import TestComponent from './TestComponent'
let spy = sinon.spy()
//Calling a prop
Test(<TestComponent onClick={spy}/>)
.find('button')
.simulate({method: 'click', element: 'button'})
.test(() => {
expect(spy.called).to.be.true
})
//finding an element
Test(<TestComponent/>)
.find('.box')
.elements('.box', (box) => {
expect(box.props.children).to.be.equal('found me!')
})##Middleware
You can write middleware to do anything you repeatedly use. You can pass .use a function, along with an object that it will take in. Each function will be injected with the current instance which includes:
component- the actual component itselfinstance- the rendered component instancehelpers- an array you can add on to with data for the end function
Example:
- See
mixinbelow, this syntax may soon be deprecated
This is the setState function used above.
Test(<TestComponent onClick={spy}/>)
.use(SetState, {})
...
export default function setState(state){
this.instance.setState(state)
}##test
The .test function will be given the component instance and the helpers array. You can use a regular function to reference this or an arrow function:
.test(({helpers, instance}) => { ... })
.test(function() {
//this.instance, this.helpers
})##element
Use .element if you're just testing an element you found with the .find method. The syntax is a little smaller:
Test(<TestComponent/>)
.find('.box')
.element(box => {
expect(box.props.children).to.be.equal('found me!')
})
//or specify the element
.find('.box')
.find('div')
.element('.box', box => {
expect(box.props.children).to.be.equal('found me!')
})##mixin
Use .mixin if you want to add new middleware as methods to Test. This gives a more natural way of using middleware:
// In this example, CustomFind middleware was added to Test by mixin
// and used if as it was a method on Test itself.
Test(<TestComponent />)
.mixin({
customFind: CustomFind
})
.customFind('cells', 'table td')
.element('cells', cells => {
expect(cells.length).to.be.equal(10)
})##DOM rendering Shallow -- uses React shallow rendering (no DOM)
Test(<TestComponent onClick={spy}/>, {shallow: true})
.find('button')
.simulate({method: 'click', element: 'button'})
.test(() => {
expect(spy.called).to.be.true
})Normal -- React render into document fragment
Test(<TestComponent onClick={spy}/>)
.find('button')
.simulate({method: 'click', element: 'button'})
.test(() => {
expect(spy.called).to.be.true
})fullDOM -- ReactDOM render into document.body.div of jsdom
Test(<section />, {fullDOM: true})
.test(function() {
expect(global.window.document.querySelector('section'))
.to.be.okay
})
.clean() // restores the document.body to emptyYou can see more examples in the tests directory.
##Testing Alt Stores
You can now test Alt stores using the same API.
import TestStore from 'legit-tests/alt/store'
TestStore(MyStore, MyActions)
.setInitialState({ todos: todos })
.addTodo({ title: "Get Beer", complete: false })
.test(({ state }) => {
expect(state.todos).to.eql(expected);
})You can see the full documentation on the Wiki