legit-tests

Chainable, easy to read, React testing library

Programming language: JavaScript

License: ISC License

Tags: Dev Tools     Test     React     React-component     Tests     React-test     React-utils    

Latest version: v2.0.0.alpha1

README

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

Current list of 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 itself
• instance - the rendered component instance
• helpers - an array you can add on to with data for the end function

Example:

• See mixin below, 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 empty

You 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