[javascript] Jest에서의 브라우저 테스트 작성 방법은 어떻게 되는가?

Jest는 JavaScript 애플리케이션을 테스트하기 위한 강력한 도구입니다. Jest를 사용하여 브라우저에서 애플리케이션 테스트를 작성하는 방법에 대해 알아보겠습니다.

  1. Puppeteer 설치하기 먼저, 브라우저를 자동화하기 위해 Puppeteer를 설치해야 합니다. Puppeteer는 Node.js 환경에서 Chrome 브라우저를 제어할 수 있게 해줍니다. 다음 명령어를 사용하여 Puppeteer를 설치하세요.

    npm install --save-dev puppeteer jest-puppeteer
    
  2. Jest 설정하기 Jest에서 Puppeteer를 사용하기 위해 설정 파일을 작성해야 합니다. 프로젝트 루트 디렉토리에 jest.config.js 파일을 만들고 다음 코드를 추가하세요.

    module.exports = {
      preset: 'jest-puppeteer',
      testEnvironment: 'jest-environment-jsdom-fifteen',
      globalSetup: './jest.setup.js',
      globalTeardown: './jest.teardown.js',
    };
    
  3. 테스트 작성하기 테스트 파일을 작성하여 브라우저에서 애플리케이션을 테스트할 수 있습니다. 프로젝트 루트 디렉토리에 example.test.js와 같은 이름으로 파일을 만들고 다음 코드를 추가하세요.

    describe('Example Test', () => {
      beforeAll(async () => {
        await page.goto('https://www.example.com');
      });
    
      it('should have the correct title', async () => {
        const pageTitle = await page.title();
        expect(pageTitle).toBe('Example Domain');
      });
    
      afterAll(async () => {
        await browser.close();
      });
    });
    

    이 테스트는 https://www.example.com로 이동한 후 페이지의 제목이 “Example Domain”인지 확인하는 간단한 테스트입니다.

  4. 테스트 실행하기 터미널에서 다음 명령어를 사용하여 테스트를 실행하세요.

    npx jest
    

    테스트가 실행되고 결과가 출력됩니다. Puppeteer를 사용하여 Chrome 브라우저가 자동으로 열리고 테스트가 수행됩니다.

이제 Jest를 사용하여 브라우저에서 애플리케이션을 테스트하는 방법을 알게 되었습니다. Puppeteer를 이용하여 자동화된 브라우저 테스트를 작성하고 실행할 수 있습니다.

참고자료: