next-page-tester

[![Build status][ci-badge]][ci] [![Test coverage report][coveralls-badge]][coveralls] [![Npm version][npm-badge]][npm]


Keywords
next, test, routing, browserless, integration-testing, nextjs, testing
License
ISC
Install
npm install next-page-tester@0.1.0

Documentation

Next page tester

Build status Test coverage report Npm version

The missing DOM integration testing tool for Next.js.

Given a Next.js route, this library will return an instance of the matching page component instantiated with the properties derived by Next.js' routing system and server side data fetching.

import { render, screen } from '@testing-library/react';
import { getPage } from 'next-page-tester';

describe('Blog page', () => {
  it('renders blog page', async () => {
    const Page = await getPage({
      route: '/blog/1',
      pagesDirectory: process.cwd() + '/src/pages',
    });

    render(Page);
    expect(screen.getByText('Blog')).toBeInTheDocument();
  });
});

What

The idea behind this library is to enable integration tests on Next.js pages including server side data fetching and routing.

The testing approach suggested here consists of manually mocking external API's and get the component instance matching a given route.

Next page tester will take care of:

  • resolving provided routes into the matching page component
  • calling Next.js data fetching methods (getServerSideProps or getStaticProps) if the case
  • set up a mocked next/router provider initialized with the expected values (to test useRouter and withRouter)
  • instantiating the page component with the expected props

Options

Property Description type Default
route Next route (must start with /) - -
pagesDirectory Absolute path of Next's /pages folder - -
req Override default mocked request object
(getServerSideProps only)
res => res -
res Override default mocked response object
(getServerSideProps only)
req => req -
router Override default mocked Next router object router => router -

Notes

req and res objects are mocked with node-mocks-http.

Next page tester can be used with any testing framework/library.

Todo's

  • Make available dynamic api routes under /pages/api
  • Consider adding custom App and Document
  • Switch to Typescript
  • Consider adding a getPage factory