README.md

Zimic + Next.js App Router

This example uses Zimic with Next.js.

Application

The application is a simple Next.js project using the App Router. It fetches repositories from the GitHub API.

• Application: src/app/page.tsx
• GitHub fetch: src/services/github.ts

A postinstall script in package.json is used to install Playwright's browsers.

Testing

An example test suite uses Playwright to test the application. Zimic is used to mock the GitHub API and simulate a test case where the repository is found and another where it is not.

Zimic

• GitHub interceptor and mocks: tests/interceptors/github.ts

Loading mocks

The script tests/interceptors/scripts/load.ts loads the interceptors and mocks before the application is started in development. It is used by the command dev:mock in package.json.

Test

• Test suite: src/__tests__/HomePage.e2e.test.ts
• Playwright configuration: playwright.config.ts

Running

1. Clone this example:

   mkdir zimic
   cd zimic
   git init
   git remote add origin git@github.com:zimicjs/zimic.git
   git sparse-checkout init
   git sparse-checkout set examples/with-next-js-app
   git pull origin main
   cd examples/with-next-js-app

2. Install the dependencies:

   pnpm install

3. Run the tests:

   1. Start the application:

      pnpm run dev:mock

      After started, the application will be available at http://localhost:3004.

   2. In another terminal, run the tests:

      pnpm run test --ui