Skip to main content

Next.js with Babel compiler

This example demonstrates how to use jest-preview with Next.js, bootstrapped using create-next-app.

⚠ī¸ This example is meant for Next.js apps using Babel to transpile (Next.js version 11 or below, or opt-out of the Next.js compiler). If you are using the new Next.js compiler (also called Rust compiler), please see the nextjs example.

🚧 Next.js's <Image /> component isn't working with Jest Preview yet.

Install Jest​

Install Jest and your favorite testing libraries, if you haven't already done so. Refer to Next.js's official document. This example uses react-testing-library.

Install & configure Jest Preview​

Install Jest Preview

npm install --save-dev jest-preview

Enable Jest Preview inside jest.config.js. Note that the Jest config object returned by configureNextJestPreview shouldn't be modified any further.

  module.exports = {
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
'!**/*.d.ts',
'!**/node_modules/**',
],
moduleNameMapper: {
- // Handle CSS imports (with CSS modules)
- // https://jestjs.io/docs/webpack#mocking-css-modules
- '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
-
- // Handle CSS imports (without CSS modules)
- '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
-
- // Handle image imports
- // https://jestjs.io/docs/webpack#handling-static-assets
- '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
-
// Handle module aliases
'^@/components/(.*)$': '<rootDir>/components/$1',
},
// Add more setup options before each test is run
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
testEnvironment: 'jsdom',
transform: {
// Use babel-jest to transpile tests with the next/babel preset
// https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+ '^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css',
+ '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': 'jest-preview/transforms/file',
},
transformIgnorePatterns: [
'/node_modules/',
- '^.+\\.module\\.(css|sass|scss)$',
],
}

Configure Jest Preview inside jest.setup.js (or any setup files specified in your setupFilesAfterEnv config), so Jest Preview knows which global CSS file to load.

import { jestPreviewConfigure } from 'jest-preview';
import 'styles/globals.css';
// SCSS is also supported
import 'demo/globals.scss',
// Any CSS from node_modules is fine
import '@your-design-system/css/dist/index.min.css',

Done​

That's it! Now you can use Jest Preview in your test. Say we have __tests__/index.test.tsx:

import { render, screen } from '@testing-library/react';
import preview from 'jest-preview';
import Home from '../pages/index';
import '@testing-library/jest-dom';

it('should show welcome message', () => {
render(<Home />);

preview.debug();

expect(
screen.getByRole('heading', { name: /welcome to next.js/i }),
).toBeInTheDocument();
});

To run this test with Jest Preview, you must keep the jest-preview server running in parallel. See the result at http://locahost:3336.

./node_modules/.bin/jest-preview

./node_modules/.bin/jest --watch

You might as well add some NPM scripts for convenience:

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
+ "test": "jest --watch",
+ "jest-preview": "jest-preview"
},
npm run jest-preview

npm run test

You may even install npm-run-all to simplify this further:

npm install --save-dev npm-run-all
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --watch",
"jest-preview": "jest-preview",
+ "test:preview": "npm-run-all -p test jest-preview"
},
npm run test:preview