<div id="readability-page-1" class="page"><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li><li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li><li><a href="#%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8B%9C%EB%A6%AC%EC%A6%88">블로그 시리즈</a></li><li><a href="#jest-%EC%84%A4%EC%B9%98">Jest 설치</a></li><li><a href="#testing-library-%EC%84%A4%EC%B9%98">Testing Library 설치</a></li><li><a href="#jest-%EA%B8%B0%EB%B3%B8-%EC%84%A4%EC%A0%95">Jest 기본 설정</a></li><li><a href="#jest-environment-jsdom-%EC%84%A4%EC%A0%95">jest-environment-jsdom 설정</a></li><li><a href="#react-testing-library-%EC%84%A4%EC%A0%95">React Testing Library 설정</a></li><li><a href="#css%EC%99%80-svg%ED%8C%8C%EC%9D%BC%EC%9D%98-%EC%84%A4%EC%A0%95">CSS와 SVG파일의 설정</a></li><li><a href="#jest-%EC%8B%A4%ED%96%89">Jest 실행</a></li><li><a href="#%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%BD%94%EB%93%9C-%EC%9E%91%EC%84%B1">테스트 코드 작성</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2>이번 블로그 포스트에서는 <code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에 테스트 환경을 구성하는 방법에 대해서 알아보도록 하겠습니다. 또한, <code>Jest</code>와 <code>React Testing Library</code>를 사용하여 테스트 코드를 작성하는 방법에 대해서도 알아봅시다.<h2 id="블로그-시리즈">블로그 시리즈</h2>이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 <code>Vite</code>의 시리즈 리스트입니다.<ul><li><a href="https://deku.posstree.com/ko/react/vite/react-typescript/start/" target="\_blank">[Vite] TypeScript 기반 React 프로젝트 시작하기</a></li><li>[Vite] TypeScript 기반 React 프로젝트에 테스트 환경 구성하기</li><li><a href="https://deku.posstree.com/ko/react/vite/react-typescript/prettier/" target="\_blank">[Vite] TypeScript 기반 React 프로젝트에 Prettier 추가하기</a></li><li><a href="https://deku.posstree.com/ko/react/vite/react-typescript/stylelint/" target="\_blank">[Vite] TypeScript 기반 React 프로젝트에 Stylelint(CSS-in-JS) 추가하기</a></li></ul><h2 id="jest-설치">Jest 설치</h2><code>Jest</code>는 페이스북에서 만든 테스트 프레임워크로, <code>React</code> 프로젝트에서 가장 많이 사용되는 테스트 프레임워크입니다. <code>Jest</code>를 사용하면 <code>JavaScript</code>에 대한 테스트 코드를 작성하고 실행할 수 있습니다.<code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에 <code>Jest</code>를 설치하려면 다음 명령어를 실행합니다.<div><pre><code>npm i -D jest @types/jest ts-jest
# yarn add -D jest @types/jest ts-jest
</code></pre></div><ul><li><code>jest</code>: <code>Jest</code>를 설치합니다.</li><li><code>@types/jest</code>: <code>Jest</code>의 타입 정의 파일을 설치합니다.</li><li><code>ts-jest</code>: <code>TypeScript</code>를 사용하여 <code>Jest</code>를 실행할 수 있도록 지원하는 패키지입니다.</li></ul><h2 id="testing-library-설치">Testing Library 설치</h2><code>React Testing Library</code>는 <code>React</code> 컴포넌트를 테스트하는 데 사용되는 라이브러리입니다. <code>React Testing Library</code>를 사용하면 <code>React</code> 컴포넌트의 렌더링 결과를 검증하거나 이벤트를 발생시키는 등의 테스트를 작성할 수 있습니다.<code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에 <code>React Testing Library</code>를 설치하려면 다음 명령어를 실행합니다.<div><pre><code>npm i -D jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-svg-transformer identity-obj-proxy
# yarn add -D jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-svg-transformer identity-obj-proxy
</code></pre></div><ul><li><code>jest-environment-jsdom</code>: <code>Jest</code>에서 <code>jsdom</code> 환경을 사용할 수 있도록 지원하는 패키지입니다.</li><li><code>@testing-library/react</code>: <code>React Testing Library</code>를 설치합니다.</li><li><code>@testing-library/jest-dom</code>: <code>Jest</code>에서 <code>React Testing Library</code>를 사용할 수 있도록 지원하는 패키지입니다.</li><li><code>@testing-library/user-event</code>: <code>React Testing Library</code>에서 사용되는 이벤트를 발생시키는 패키지입니다.</li><li><code>jest-svg-transformer</code>: <code>Jest</code>에서 <code>SVG</code> 파일을 사용할 수 있도록 지원하는 패키지입니다.</li><li><code>identity-obj-proxy</code>: <code>CSS Module</code>을 사용하는 경우 <code>Jest</code>에서 <code>CSS Module</code>을 사용할 수 있도록 지원하는 패키지입니다.</li></ul><h2 id="jest-기본-설정">Jest 기본 설정</h2><code>Jest</code>를 사용하여 <code>TypeScript</code> 기반 <code>React</code> 프로젝트를 테스트하려면 <code>Jest</code>를 설정할 필요가 있습니다. 다음 명령어를 실행하여 루트 폴더에서 다음 명령어를 실행하여 <code>Jest</code> 설정 파일을 생성합니다.<div><pre><code>npx ts-jest config:init
# yarn ts-jest config:init
</code></pre></div>그럼 루트 폴더에 <code>Jest</code>의 설정 파일인 <code>jest.config.js</code> 파일이 생성되는 것을 확인할 수 있습니다. 해당 파일을 열면 다음과 같은 내용을 확인할 수 있습니다.<div><pre><code>/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
 preset: 'ts-jest',
 testEnvironment: 'node',
};
</code></pre></div><code>Vite</code>를 사용하여 생성한 프로젝트는 디폴트 모듈 시스템이 <code>ES Modules</code>이기 때문에 다음과 같이 <code>module.export</code>(CommonJS 모듈 시스템)를 <code>export default</code>(ES Modules 시스템)로 변경해야 합니다.<div><pre><code>/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
 preset: 'ts-jest',
 testEnvironment: 'node',
};
</code></pre></div>또 <code>CommonJS</code>와 <code>ES modules</code>에 차이에 의해 테스트 실행시 경고가 발생할 가능성이 있습니다. 이를 방지하기 위해 <code>tsconfig.json</code> 파일을 열고 다음과 같이 <code>esModuleInterop</code> 옵션을 설정합니다.<div><pre><code>{
 ...
 "compilerOptions": {
 "esModuleInterop": true,
 ...
 },
 ...
}
</code></pre></div><h2 id="jest-environment-jsdom-설정">jest-environment-jsdom 설정</h2><code>Jest</code>의 기본 테스트 환경은 다음과 같이 <code>node</code>로 설정되어 있습니다.<div><pre><code>/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
 preset: 'ts-jest',
 testEnvironment: 'node',
};
</code></pre></div>하지만, <code>React</code> 테스트는 <code>DOM</code> 환경에서 실행되어야 하기 때문에 다음과 같이 <code>jest-environment-jsdom</code>을 사용하도록 설정할 필요가 있습니다.<div><pre><code>/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
 preset: 'ts-jest',
 testEnvironment: 'jest-environment-jsdom',
};
</code></pre></div><h2 id="react-testing-library-설정">React Testing Library 설정</h2><code>React Testing Library</code>로 <code>React</code> 컴포넌트를 테스트하기 위해 <code>React Testing Library</code>에서 제공하는 <code>Jest</code>용 <code>Matchers</code>를 사용할 수 있도록 설정할 필요가 있습니다.<code>React Testing Library</code>가 제공하는 <code>Jest</code>용 <code>Matchers</code>를 설정하기 위해 루트 폴더에 <code>jest.setup.ts</code> 파일을 생성하고, 다음과 같이<code>@testing-library/jest-dom</code>을 <code>import</code>합니다.<div><pre><code>import '@testing-library/jest-dom';
</code></pre></div>그런 다음 다시 <code>jest.config.js</code> 파일을 열고 다음과 같이 <code>setupFilesAfterEnv</code> 옵션을 추가합니다.<div><pre><code>/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
 preset: 'ts-jest',
 testEnvironment: 'node',
 setupFilesAfterEnv: ['./jest.setup.ts'],
};
</code></pre></div><code>Jest</code>의 테스트 파일에서 <code>React Testing Library</code>의 <code>Matchers</code>의 타입을 사용할 수 있도록 하기 위해, <code>tsconfig.json</code> 파일을 열고 다음과 같이 <code>types</code> 옵션을 추가합니다.<div><pre><code>{
 ...
 "compilerOptions": {
 "esModuleInterop": true,
 "types": ["@testing-library/jest-dom"],
 ...
 },
 ...
}
</code></pre></div><h2 id="css와-svg파일의-설정">CSS와 SVG파일의 설정</h2><code>CSS</code> 파일과 <code>SVG</code> 파일을 <code>Jest</code>에서 사용할 수 있도록 설정하기 위해 <code>jest.config.js</code> 파일에 다음과 같이 <code>moduleNameMapper</code> 옵션을 추가할 필요가 있습니다.<div><pre><code>/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
 preset: 'ts-jest',
 testEnvironment: 'jest-environment-jsdom',
 setupFilesAfterEnv: ['./jest.setup.ts'],
 moduleNameMapper: {
 '^.+\\.svg$': 'jest-svg-transformer',
 '\\.(css|less|scss)$': 'identity-obj-proxy',
 },
};
</code></pre></div><h2 id="jest-실행">Jest 실행</h2>이제 <code>Jest</code>와 <code>React Testing Library</code>를 사용하여 <code>TypeScript</code> 기반 <code>React</code> 프로젝트를 테스트할 수 있습니다. <code>Jest</code>를 사용하여 테스트를 실행할 수 있도록 하기 위해 <code>package.json</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>"scripts": {
 ...
 "test": "jest --watchAll",
 "test:ci": "jest --ci"
},
</code></pre></div>수정이 완료되었다면 다음 명령어를 실행하여 <code>Jest</code>를 실행합니다.그럼 다음과 같이 <code>Jest</code>가 잘 실행되는 것을 확인할 수 있습니다.<div><pre><code>No tests found, exiting with code 0

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
</code></pre></div>현재는 테스트 코드를 작성하지 않았기 때문에 <code>No tests found</code>라는 메시지가 출력되는 것을 확인할 수 있습니다.<h2 id="테스트-코드-작성">테스트 코드 작성</h2>이제 <code>Jest</code>와 <code>React Testing Library</code>를 사용하여 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에서 테스트 코드를 작성하는 방법에 대해서 알아보도록 하겠습니다. <code>Jest</code>와 <code>React Testing Library</code>를 사용하여 테스트 코드를 작성하기 위해, <code>src</code> 디렉토리에 <code>App.test.tsx</code> 파일을 생성하고 다음과 같이 수정합니다.<div><pre><code>import { render, screen } from '@testing-library/react';
import App from './App';

describe('&lt;App /&gt;', () =&gt; {
 it('Rendered well', async () =&gt; {
 const { container } = render(&lt;App /&gt;);

 expect(screen.getByAltText('Vite logo')).toBeInTheDocument();
 expect(screen.getByAltText('React logo')).toBeInTheDocument();
 expect(screen.getByText('Vite + React')).toBeInTheDocument();

 expect(container).toMatchSnapshot();
 });
});
</code></pre></div><code>Jest</code>와 <code>React Testing Library</code>를 사용하여 <code>Vite</code> 로고와 <code>React</code> 로고, 그리고 <code>Vite + React</code> 텍스트가 잘 렌더링되는지 확인하는 테스트 코드를 작성하였습니다.작성한 테스트 코드를 실행하기 위해, 터미널에서 다음 명령어를 실행하여 테스트를 실행합니다.그럼 이전과는 다르게 다음과 같이 테스트 결과가 출력되는 것을 확인할 수 있습니다.<div><pre><code> PASS src/App.test.tsx
 &lt;App /&gt;
 ✓ Rendered well (20 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 written, 1 total
Time: 1.749 s, estimated 2 s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
</code></pre></div>또한 <code>toMatchSnapshot</code>을 사용하여 스냅샷 테스트를 작성하였기 때문에 <code>__snapshots__</code> 디렉토리에 스냅샷 파일이 생성되는 것을 확인할 수 있습니다.<h2 id="완료">완료</h2>이것으로 <code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에 테스트 환경을 구성하는 방법에 대해서 알아보았습니다. 이제 <code>Jest</code>와 <code>React Testing Library</code>를 사용하여 테스트 코드를 작성하여 안전하고 안정적인 <code>React</code> 프로젝트를 개발해 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div>

dev-yakuza

Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 테스트 환경을 구성하는 방법에 대해서 알아보도록 하겠습니다.