Skip to main content

isolate-react

The missing tool for test-driving react hooks and components​

  • No DOM emulator required
  • Supports any test runner
  • Zero dependencies
  • Simple-to-use
  • Guaranteed faster than other react testing tools, or your money back

Examples/TLDR​

Test a component:​

// the component we want to test
import React, { useState } from 'react'
import { isolateComponent } from 'isolate-react'

const CounterButton = () => {
const [count, setCount] = useState(0)
return (
<div>
<span className="count">{count}</span>
<button type="button" onClick={() => setCount(count + 1)}>
+1
</button>
</div>
)
}

test('starts at zero', () => {
const counterButton = isolateComponent(<CounterButton />)
expect(counterButton.findOne('span.count').content()).toEqual('0')
})

test('increments upon click', () => {
const counterButton = isolateComponent(<CounterButton />)

counterButton.findOne('button').props.onClick()
expect(counterButton.findOne('span.count').content()).toEqual('1')
})

Test a hook​

import { isolateHook } from 'isolate-react'

import React, { useState, useEffect } from 'react'

const useRememberNames = (name: string) => {
const [names, setNames] = useState([name])

// when name changes,
// add it to our list of names,
// if we haven't seen it yet
useEffect(() => {
if (!names.includes(name)) {
names.push(name)
}
}, [name])

return names
}

test('remembers the initial name', () => {
const useTestRememberNames = isolateHook(useRememberNames)
expect(useTestRememberNames('Arthur')).toEqual(['Arthur'])
})

test('remembers two names', () => {
const useTestRememberNames = isolateHook(useRememberNames)
useTestRememberNames('Arthur')
expect(useTestRememberNames('Trillian')).toEqual(['Arthur', 'Trillian'])
})

test('does not remember duplicate names', () => {
const useTestRememberNames = isolateHook(useRememberNames)
useTestRememberNames('Ford')
useTestRememberNames('Arthur')
useTestRememberNames('Ford')

expect(useTestRememberNames('Arthur')).toEqual(['Ford', 'Arthur'])
})

Why use isolate-react?​

Flexible support for whatever level of testing you prefer:​

  • Test custom hooks
  • Render a single component at a time (isolated/unit testing)
  • Render multiple components together (integrated testing)

Low-friction:​

  • Works with any test runner that runs in node (jest, mocha, tape, tap, etc.)
  • Full hook support
  • Easy access to set context values needed for testing
  • No virtual DOM or other tools to install
  • Very fast

See the API documentation for usage, or jump right into the documentation:

  • [isolateComponent](./Testing Components/02-isolateComponent.md)
  • [isolateComponentTree](./Testing Components/03-isolateComponentTree.md)
  • [isolateHook](./Testing Hooks/01-overview.md)

Issues & Progress​

See the project tracker for project progress.

File an issue if you have a suggestion or request.