legit-tests alternatives and similar libraries
Based on the "Test" category.
Alternatively, view legit-tests alternatives based on common mentions on social networks and blogs.
-
react-testing-library
๐ Simple and complete React DOM testing utilities that encourage good testing practices. -
carte-blanche
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them. -
chai-enzyme
Chai.js assertions and convenience functions for testing React Components with enzyme -
redux-test-recorder
a redux middleware to automatically generate tests for reducers through ui interaction -
ui-harness
Create, isolate and test modular UI components in React. -
unexpected-react
Plugin for http://unexpected.js.org to enable testing the full React virtual DOM, and also the shallow renderer
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of legit-tests or a related project?
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
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
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