@guinie/react NPM

@guinie/react

A library of utilities for running defined sequences of interaction on React components in a unit testing context.

Install

npm install -D @guinie/react

Usage

@guinie/react provides: 1. A unit testing context for React components 1. A function for producing a driver state for React unit testing context

The context for React unit tests is created using the configure function exported by the module. This context should be passed in to interaction sequences first in test files. This can be done as a simple function call or by using the applyContext helper function:

const { applyContext } = require('@guinie/common')
const { configure } = require('@guinie/react')
const frontpageActions = require('./front-page.unit.test.js')

const { context } = configure()

// This...
const login = frontpageActions.login(context)
const createTodo = frontpageActions.createTodo(context)
const loginAndCreateTodo = frontpageActions.loginAndCreateTodo(context)

// ...is equivalent to this
const [
  login2,
  createTodo2,
  loginAndCreateTodo2
] = applyContext(
  frontpageActions.login,
  frontpageActions.createTodo,
  frontpageActions.loginAndCreateTodo
)(context)

Now that we have sequences with driver context applied, we can pass in parameters for the test:

// Pass final details in for the test function
const loginAsCarlAndCreateShoppingTodo = loginAndCreateTodo({
  username: 'Carl',
  password: 'secret',
  title: 'Do shopping'
})

Finally, produce a driver state with the wrapDriver -function and pass the driver state in to the parameterized test to execute the sequence:

const { wrapDriver } = reactContext

// Create a new driver state for `AppWithFakeApi` component
const driverState = wrapDriver(<AppWithFakeApi />)

// Execute sequence
const finalDriverState = await loginAsCarlAndCreateShoppingTodo(driverState)

The functions in reactContext can be used to find elements or manipulate the driver state further. You can also get the object returned by @testing-library/react render function from the driver state:

const {
  findElement,
  click,
} = reactContext

// Find elements
const element = findElement('my-component--2')(finalDriverState)

// Run interactions
const click('my-button--1')(finalDriverState)

// Get the object returned by `@testing-library/react` `render` -function
const rendered = finalDriverState.driver