ReactプロジェクトにおけるJestを用いたユニットテストの基礎

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

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
/** @type {import('jest').Config} */
const config = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 
  testEnvironment: 'jest-environment-jsdom',
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)

import React from 'react';
import { render } from '@testing-library/react';
import SimpleComponent from './SimpleComponent';

test('renders SimpleComponent', () => {
  const { getByText } = render(<SimpleComponent />);
  expect(getByText(/simple component/i)).toBeInTheDocument();
});

import React from 'react';
import { render } from '@testing-library/react';
import PropsComponent from './PropsComponent';

test('renders PropsComponent with props', () => {
  const { getByText } = render(<PropsComponent title="Test Title" />);
  expect(getByText(/test title/i)).toBeInTheDocument();
});

test('async function example', async () => {
  const result = await myAsyncFunction();
  expect(result).toBe('expected value');
});

import axios from 'axios';

jest.mock('axios');

test('mocking axios request', async () => {
  axios.get.mockResolvedValue({ data: 'some data' });
  const result = await fetchDataFunction(); // function that calls axios.get
  expect(result).toBe('some data');
});

import { renderHook } from '@testing-library/react-hooks';
import { useMyHook } from './myHook';

test('testing a hook with useEffect', () => {
  const { result } = renderHook(() => useMyHook());
  expect(result.current.someValue).toBe('expected value');
});

import { renderHook, act } from '@testing-library/react-hooks';
import { useCounter } from './counterHook';

test('testing a counter hook', () => {
  const { result } = renderHook(() => useCounter());
  act(() => {
    result.current.increment();
  });
  expect(result.current.count).toBe(1);
});

npm test -- --coverage