Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joserfelix/testing-initializer
🚀 Simple and complete bootstrapping testing utilities that encourage efficient testing practices.
https://github.com/joserfelix/testing-initializer
Last synced: 6 days ago
JSON representation
🚀 Simple and complete bootstrapping testing utilities that encourage efficient testing practices.
- Host: GitHub
- URL: https://github.com/joserfelix/testing-initializer
- Owner: JoseRFelix
- Created: 2022-01-16T20:22:30.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-01T06:35:31.000Z (about 2 years ago)
- Last Synced: 2024-11-04T00:33:01.597Z (15 days ago)
- Language: TypeScript
- Homepage:
- Size: 468 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
Testing Initializer
Simple and complete bootstrapping testing utilities that encourage efficient testing practices.
## Motivation
When testing front-end applications you often need to initialize components, and create mock data matching your
back-end. Instead of having to do repeat this process in every test, this library will provide you with a set of
utilities for bootstrapping your tests without boilerplate and facilitate efficient data-driven API mocking.
## Packages
- [@testing-initializer/react](#react-testing-initializer): Testing bootstrapping utilities for React. This library
contains `@testing-initializer/data`. So, if you are using React, I recommend installing only this package.
- [@testing-initializer/data](#data-testing-initializer): Wrapper around [@msw/data]("https://github.com/mswjs/data")
that allows for typed data modelling and relation on a mocked database.
## React Testing Initializer
This package contains all necessary utilities for bootstrapping React components in your tests.
### Installation
```shell
npm i @testing-initializer/data
```
or with Yarn:
```shell
yarn add @testing-initializer/react
```
### Usage
First, let's create our mock database:
```ts
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({
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:
```ts
interface TestComponentProps {
project: Project
}
const TestComponent = ({ project }: TestComponentProps) => {
return (
{project.user.name}
{project.name}
{project.toDos.map(({ id, name }) => (
{name}
))}
)
}
```
We can now proceed to create a renderer, a reusable function that renders your component with its necessary props:
```ts
import { createRenderer, createDatabase, generateId } from "@testing-initializer/react"
...
const renderTestComponent = createRenderer()
.addData("currentUser", () => db.user.create())
.addData("toDos", () => [db.toDo.create(), db.toDo.create(), db.toDo.create()])
.setProps(({ currentUser, toDos }) => ({
project: db.project.create({ toDos, user: currentUser }) as unknown as Project,
currentUser,
toDos,
}))
.setComponent(TestComponent)
.setRenderFunction(render)
.build()
```
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:
```ts
it("...", () => {
const { project, currentUser, toDos } = renderTestComponent()
})
```
We can also render override its `data` or `props`:
```ts
it("...", () => {
renderTestComponent({
data: {
currentUser: db.user.create({ name: "User override" }),
},
})
})
```
## Data Testing Initializer
This package allows you to create a [@msw/data]("https://github.com/mswts/data") type-safe database. It will read nested
arrays as a `many of` relationship and objects as a `one of` relationship.
### Installation
```shell
npm i @testing-initializer/data
```
or with Yarn:
```shell
yarn add @testing-initializer/data
```
### Usage
First make you have your types available:
```ts
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
}
```
Proceed to create your mock database based on this types.
```ts
import { createDatabase, generateId } from "@testing-initializer/data"
const db = createDatabase({
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 you can use all database methods available in [@msw/data]("https://github.com/mswts/data"):
```ts
db.user.create()
db.user.findFirst({ ... })
db.project.findMany({ ... })
```