Nascent Prototype Metaverse

    legit-tests

    1.1.2 • Public • Published

    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

    Install

    npm i legit-tests

    DownloadsWeekly Downloads

    9

    Version

    1.1.2

    License

    ISC

    Last publish

    Collaborators

    • dphaener
    • zackify