Testing

Now that everything is working, let's make sure that it stays that way!

Packages to install

There are 3 packages I recommend you'll install:

npm i -D pouchdb-adapter-memory @testing-library/react-hooks @testing-library/react
yarn add -D pouchdb-adapter-memory @testing-library/react-hooks @testing-library/react

pouchdb-adapter-memory

pouchdb-adapter-memory is a PouchDB Adapter. Adapters translate how your documents are stored and accessed. For example pouchdb-adapter-http (pre installed on most PouchDB setups) translates them into CouchDB's HTTP API.

But pouchdb-adapter-memory only stores them in memory. Perfect or testing!

react-hooks-testing-library

react-hooks-testing-library is a really good testing library, specialized in testing React Hooks.

The documentation for it can be found on https://react-hooks-testing-library.com/.

You can use it to test your own hooks. Be they extensions of hooks from usePouchDB or your own.

React Testing Library

React Testing Library comes pre-installed with create-react-app. It is a testing library that encourage you to test from the users perspective.

The documentation for it can be found at https://testing-library.com/docs/react-testing-library/intro.

Tests

Your tests should be closed systems. And no test before or after it should influence them. To achieve this I recommend that you create a new PouchDB database before each test. And that db should have the pouchdb-adapter-memory active.

// Using jest
import PouchDB from 'pouchdb'
import memory from 'pouchdb-adapter-memory'

// add the adapter to PouchDB
PouchDB.plugin(memory)

let myPouch = null

beforeEach(() => {
  // before each test, create a new DB with the memory adapter.
  // nothing will be saved on disc!
  myPouch = new PouchDB('test', { adapter: 'memory' })
})

afterEach(async () => {
  // Destroy the database after each test,
  // so that no data will be left from the previous test.
  await myPouch.destroy()
})

Also remember, that you must add all needed document before/during the test!

Components

All hooks must be in child components of <Provider />.

For React Testing Library you can warp your component with <Provider />:

import React from 'react'
import { render } from '@testing-library/react'
import PouchDB from 'pouchdb'
import memory from 'pouchdb-adapter-memory'

import TodoList from './TodoList'

PouchDB.plugin(memory)

let myPouch = null

beforeEach(() => {
  myPouch = new PouchDB('test', { adapter: 'memory' })
})

afterEach(async () => {
  await myPouch.destroy()
})

test('Test Component', async () => {
  // Add needed documents
  const putResult = await myPouch.bulkDocs([
    {
      _id: new Date(2020, 4, 30, 22, 03, 45, 0).toJSON(),
      type: 'todo',
      text: 'a todo',
      done: false,
    },
    {
      _id: new Date(2020, 4, 30, 21, 03, 45, 0).toJSON(),
      type: 'todo',
      text: 'moar todo',
      done: false,
    },
  ])

  // Render the Component
  const { queryByByText } = render(
    <Provider pouchdb={db}>
      <TodoList />
    </Provider>
  )

  const first = queryByByText('moar todo')
  expect(first).toBeTruthy()
  expect(first.nodeName).toBe('SPAN')
  expect(first.parentNode.nodeName).toBe('LI')
  expect(first.previousElementSibling.nodeName).toBe('INPUT')
  expect(first.previousElementSibling.nodeName.type).toBe('checkbox')

  const second = queryByByText('a todo')
  expect(second).toBeTruthy()
  expect(second.nodeName).toBe('SPAN')
  expect(second.parentNode.nodeName).toBe('LI')
  expect(second.previousElementSibling.nodeName).toBe('INPUT')
  expect(second.previousElementSibling.nodeName.type).toBe('checkbox')

  expect(second.parentNode.previousElementSibling).toBe(first.parentNode)
})

myPouch.bulkDocs is a method to create/update multiple docs in one go.

Hooks

To test hooks that depend on one of usePouchDB's hooks, you also must warp it in <Provider />.

react-hooks-testing-library's renderHook function can receive in the second argument a warper (documented here).

Let's test the addTodo from Add Todos extracted into a hook:

// hooks.js
import { useCallback } from 'react'
import { usePouch } from 'use-pouchdb'

// This hook returns a function, which we then call with the todo's text.
export function useAddDoc() {
  const db = usePouch()

  return useCallback(
    text => {
      const doc = {
        _id: new Date().toJSON(),
        type: 'todo',
        text: text,
        done: false,
      }

      return db.put(doc)
    },
    [db]
  )
}

import React from 'react'
import { renderHook } from '@testing-library/react-hooks'
import PouchDB from 'pouchdb'
import memory from 'pouchdb-adapter-memory'
import { Provider } from 'use-pouchdb'

import { useAddDoc } from './hooks'

PouchDB.plugin(memory)

let myPouch = null

beforeEach(() => {
  myPouch = new PouchDB('test', { adapter: 'memory' })
})

afterEach(async () => {
  await myPouch.destroy()
})

test('add document', async () => {
  const wrapper = ({ children }) => (
    <Provider pouchdb={myPouch}>{children}</Provider>
  )
  const { result } = renderHook(() => useAddDoc(), {
    wrapper,
  })

  expect(typeof result.current).toBe('function')

  await result.current('test todo')

  const { rows } = await myPouch.allDocs({ include_docs: true })
  expect(rows).toHaveLength(1)
  expect(rows[0]).toEqual({
    _id: expect.any(String),
    _rev: expect.any(String),
    type: 'todo',
    text: 'test todo',
    done: false,
  })
})

Now we are finished with our Todo example. All Todos are replicated, users can sign up and log in. I know, this was a long tutorial, but we did cover a lot!

Happy coding! 🎉🎊

← SyncingMore →