Setting up Jest with Next.js

Jest ve React Test Kütüphanesi, Birim Testi ve Snapshot Testi için sıklıkla birlikte kullanılır. Bu kılavuz size Next.js ile Jest'i nasıl kuracağınızı ve ilk testlerinizi nasıl yazacağınızı gösterecektir.

Bilmekte fayda var: async Sunucu Bileşenleri React ekosistemi için yeni olduğundan, Jest şu anda bunları desteklemiyor. Senkron Sunucu ve İstemci Bileşenleri için hala birim test leri çalıştırabilseniz de, async bileşenleri için bir E2E testleri kullanmanızı öneririz.

Quickstart

Hızlı bir şekilde başlamak için Next.js with-jest örneği ile create-next-app adresini kullanabilirsiniz:

Terminal 
npx create-next-app@latest --example with-jest with-jest-app

Manual setup

Next.js 12 sürümünden bu yana Next.js artık Jest için yerleşik yapılandırmaya sahiptir.

Jest'i kurmak için jest adresini ve aşağıdaki paketleri dev bağımlılıkları olarak yükleyin:

Terminal 
npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

Aşağıdaki komutu çalıştırarak temel bir Jest yapılandırma dosyası oluşturun:

Terminal 
npm init jest@latest
# or
yarn create jest@latest
# or
pnpm create jest@latest

Bu, otomatik olarak bir jest.config.ts|js dosyası oluşturmak da dahil olmak üzere projeniz için Jest'i ayarlamak üzere sizi bir dizi komut istemine götürecektir.

Yapılandırma dosyanızı next/jest kullanmak için güncelleyin. Bu dönüştürücü, Jest'in Next.js ile çalışması için gerekli tüm yapılandırma seçeneklerine sahiptir:

jest.config.ts 
import type { Config } from 'jest'
import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})
 
// Add any custom config to be passed to Jest
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)

Kaputun altında, next/jest Jest'i sizin için otomatik olarak yapılandırıyor:

Bilmekte fayda var: Ortam değişkenlerini doğrudan test etmek için, bunları ayrı bir kurulum betiğine veya jest.config.ts dosyanıza manuel olarak yükleyin. Daha fazla bilgi için lütfen Ortam Değişkenlerini Test Etme bölümüne bakın.

Optional: Handling Absolute Imports and Module Path Aliases

Projeniz Modül Yolu Takma Adlarını kullanıyorsa, jsconfig.json dosyasındaki paths seçeneğini jest.config.js dosyasındaki moduleNameMapper seçeneğiyle eşleştirerek içe aktarmaları çözmek için Jest'i yapılandırmanız gerekecektir. Örneğin:

tsconfig.json or jsconfig.json 
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
jest.config.js 
moduleNameMapper: {
  // ...
  '^@/components/(.*)$': '<rootDir>/components/$1',
}

Optional: Extend Jest with custom matchers

@testing-library/jest-dom test yazmayı kolaylaştıran .toBeInTheDocument() gibi bir dizi kullanışlı özel eş leştirici içerir. Jest yapılandırma dosyasına aşağıdaki seçeneği ekleyerek her test için özel eşleştiricileri içe aktarabilirsiniz:

jest.config.ts 
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']

Ardından, jest.setup.ts içine aşağıdaki içe aktarmayı ekleyin:

jest.setup.ts 
import '@testing-library/jest-dom'

Bilmekte fayda var:extend-expect , v6.0 içinde kaldırıldı, bu nedenle sürüm 6'dan önce @testing-library/jest-dom kullanıyorsanız, bunun yerine @testing-library/jest-dom/extend-expect içe aktarmanız gerekecektir.

Her testten önce daha fazla kurulum seçeneği eklemeniz gerekiyorsa, bunları yukarıdaki jest.setup.js dosyasına ekleyebilirsiniz.

Add a test script to package.json:

Son olarak, package.json dosyanıza bir Jest test betiği ekleyin:

package.json 
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch"
  }
}

jest --watch bir dosya değiştirildiğinde testleri yeniden çalıştıracaktır. Daha fazla Jest CLI seçeneği için lütfen Jest Docs adresine bakın.

Creating your first test:

Projeniz artık testleri çalıştırmaya hazır. Projenizin kök dizininde __tests__ adında bir klasör oluşturun.

Örneğin, <Page /> bileşeninin bir başlığı başarıyla oluşturup oluşturmadığını kontrol etmek için bir test ekleyebiliriz: 

import Link from 'next/link'
 
export default async function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}
__tests__/page.test.jsx 
import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'
 
describe('Page', () => {
  it('renders a heading', () => {
    render(<Page />)
 
    const heading = screen.getByRole('heading', { level: 1 })
 
    expect(heading).toBeInTheDocument()
  })
})

İsteğe bağlı olarak, bileşeninizdeki beklenmedik değişiklikleri takip etmek için bir anlık görüntü testi ekleyin:

__tests__/snapshot.js 
import { render } from '@testing-library/react'
import Page from '../app/page'
 
it('renders homepage unchanged', () => {
  const { container } = render(<Page />)
  expect(container).toMatchSnapshot()
})

Running your tests

Ardından, testlerinizi çalıştırmak için aşağıdaki komutu çalıştırın:

Terminal 
npm run test
# or
yarn test
# or
pnpm test

Additional Resources

Daha fazla okuma için bu kaynakları faydalı bulabilirsiniz: