프론트엔드 테스트 개발 환경 설정하기

nextjs setup

npx create-next-app@latest

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  swcMinify: true,
};
 
export default nextConfig;

yarnberry setup

yarn set version berry

.gitignore

!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
.yarn/cache

.yarnrc.yml

yarnPath: .yarn/releases/yarn-4.2.2.cjs
enableGlobalCache: false

vitest | RTL setup

yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react

yarn add -D @testing-library/jest-dom vitest-fetch-mock vite-tsconfig-paths @testing-library/user-event happy-dom

vitest.config.ts

import { defineConfig } from 'vitest/config';
import tsConfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
  plugins: [react(), tsConfigPaths()],
  test: {
    globals: true,
    environment: 'happydom',
    setupFiles: ['./vitest.setup.ts'],
    include: ['**/*.test.+(ts|tsx|js)'],
  },
});

vitest.setup.ts

import '@testing-library/jest-dom';
import { vi } from 'vitest';
import createFetchMock from 'vitest-fetch-mock';
 
const fetchMocker = createFetchMock(vi);
fetchMocker.enableMocks();

  it('component render test', () => {
    render(<button type={'button'}>helloworld</button>);
    expect(screen.getByRole('button', { name: 'helloworld' })).toBeInTheDocument();
  });

  "compilerOptions": {
    "types": [ "vitest/globals"],

package.json setup

    "test": "vitest",
    "test:coverage": "vitest run --coverage.all",
    "test:all": "vitest run",

tanstackquery setup

// 테스트 환경에서는 retry가 있는 경우 테스팅 시간이 늘어나는 문제가 있습니다. 이를 방지하기 위해 retry를 0으로 설정합니다.
const testingClinet = () => new QueryClient({ defaultOptions: { queries: { retry: 0 } } });

export const Wrapper = () => {
  return function wrapper({ children }: PropsWithChildren) {
    return (
      <QueryClientProvider client={testingClinet()}>
        <Suspense>{children}</Suspense>
      </QueryClientProvider>
    );
  };
};

import { renderHook, waitFor } from "@testing-library/react";
 
...
 
const { result } = renderHook(() => useCustomHook(), { wrapper });
 
await waitFor(() => expect(result.current.isSuccess).toBe(true));

await waitFor(() => expect(result.current.isSuccess).toBe(true));

msw setup

yarn add -D msw

import { http, HttpResponse } from 'msw';
​
export const handlers = [
  http.get('/api/hello', () => {
    return HttpResponse.json({
      id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d',
      firstName: 'John',
      lastName: 'Maverick',
    });
  }),
];

import { setupServer } from 'msw/node';
 
export const mockServer = setupServer(...handlers);

vitest.setup.ts

import { mockServer as server } from './src/mocks/node';
 
beforeAll(() => {
  server.listen();
});
 
afterEach(() => {
  server.resetHandlers();
});
 
afterAll(() => {
  server.close();
});

playwright setup

yarn create playwright

• Choose between TypeScript or JavaScript (default is TypeScript)
• Name of your Tests folder (default is tests or e2e if you already have a tests folder in your project)
• Add a GitHub Actions workflow to easily run tests on CI
• Install Playwright browsers (default is true)

  "e2e": "playwright test",
  "e2e:ui": "playwright test --ui"

storybook setup

npx storybook@latest init

import type { Config } from 'tailwindcss';
 
const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './.storybook/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {},
  plugins: [],
};
export default config;

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

import type { Preview } from '@storybook/react';
import '../src/app/style/tailwind.css';
 
const preview: Preview = {

biome setup

yarn add --dev --exact @biomejs/biome

yarn biome init

{
	"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
	"formatter": {
		"enabled": true,
		"formatWithErrors": true,
		"indentStyle": "space",
		"indentWidth": 2,
		"lineEnding": "lf",
		"lineWidth": 120,
		"attributePosition": "auto",
		"ignore": [
			"**/.gitignore",
			"**/.yarn",
			"**/.pnp.*",
			"**/build",
			"**/coverage",
			"**/dist",
			"**/lib",
			"**/.next"
		]
	},
	"organizeImports": { "enabled": true },
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true,
			"a11y": {
				"noAccessKey": "error",
				"noAriaUnsupportedElements": "error",
				"noAutofocus": "error",
				"noDistractingElements": "error",
				"noHeaderScope": "error",
				"noInteractiveElementToNoninteractiveRole": "error",
				"noNoninteractiveElementToInteractiveRole": "error",
				"noNoninteractiveTabindex": "error",
				"noPositiveTabindex": "error",
				"noRedundantAlt": "error",
				"noRedundantRoles": "error",
				"useAltText": "error",
				"useAnchorContent": "error",
				"useAriaActivedescendantWithTabindex": "error",
				"useAriaPropsForRole": "error",
				"useHeadingContent": "error",
				"useHtmlLang": "error",
				"useIframeTitle": "error",
				"useKeyWithClickEvents": "error",
				"useKeyWithMouseEvents": "error",
				"useMediaCaption": "error",
				"useValidAnchor": "error",
				"useValidAriaProps": "error",
				"useValidAriaRole": "error",
				"useValidAriaValues": "error"
			}
		}
	},
	"javascript": {
		"formatter": {
			"jsxQuoteStyle": "double",
			"quoteProperties": "asNeeded",
			"trailingComma": "es5",
			"semicolons": "always",
			"arrowParentheses": "asNeeded",
			"bracketSpacing": true,
			"bracketSameLine": false,
			"quoteStyle": "single",
			"attributePosition": "auto"
		}
	}
}

lefthook setup

yarn add -D lefthook

pre-commit:
  parallel: true
  commands:
    format:
      run: yarn format
      stage_fixed: true
    lint-next:
      run: yarn lint:next
      stage_fixed: true
    lint:
      run: yarn lint
      stage_fixed: true

마치며