@testing-initializer/react

React Testing Initializer

This package contains all necessary utilities for bootstrapping React components in your tests.

Installation

npm i --save-dev @testing-initializer/data

or with Yarn:

yarn add -D @testing-initializer/react

Usage

First, let's create our mock database:

import { createDatabase, generateId } from "@testing-initializer/react"

interface User {
  id: number
  name: string
}

interface ToDo {
  id: number
  name: string
}

interface Project {
  id: number
  name: string
  date: string
  user: User
  toDos: ToDo[]
}

interface APITypes {
  user: User
  toDo: ToDo
  project: Project
}

const db = createDatabase<APITypes>({
  user: {
    id: () => generateId("user-pk"),
    name: () => `User ${generateId("user-name")}`,
  },
  toDo: {
    id: () => generateId("toDo-pk"),
    name: () => `Todo ${generateId("toDo-name")}`,
  },
  project: {
    id: () => generateId("project-pk"),
    date: () => new Date().toISOString(),
    name: () => `Project ${generateId("project-name")}`,
    user: oneOf("user"),
    toDos: manyOf("toDo"),
  },
})

Now, let's say we have the following component:

interface TestComponentProps {
  project: Project
}

const TestComponent = ({ project }: TestComponentProps) => {
  return (
    <div>
      <p>{project.user.name}</p>
      <p>{project.name}</p>
      <div>
        {project.toDos.map(({ id, name }) => (
          <p key={id}>{name}</p>
        ))}
      </div>
    </div>
  )
}

We can now proceed to create a renderer, a reusable function that renders your component with its necessary props:

import { createRenderer, createDatabase, generateId } from "@testing-initializer/react"

...

const renderTestComponent = createRenderer({
    component: TestComponent,
    data: {
      currentUser: db.user.create(),
      toDos: [db.toDo.create(), db.toDo.create(), db.toDo.create()],
    },
    props: ({ currentUser, toDos }) => ({
      project: db.project.create({ toDos, user: currentUser }) as unknown as Project,
    }),
    renderFunction: render,
  })

Notice the data property. These extra properties are useful for getting generated data outside of the component props.

With this renderer, we can render our components consistently within tests:

it("...", () => {
  const { project, currentUser, toDos } = renderTestComponent()
})

We can also render override its data or props:

it("...", () => {
  renderTestComponent({ currentUser: db.user.create({ name: "User override" }) })
})

License

This project is licensed under the terms of the MIT license