Jest Typescript Babel Puppeteer 설정하기

Posted on Edited on In , Word count in article: 261 Reading time ≈ 1 mins.

Jest + Typescript + Babel 을 설정하는 방법을 경험했다면
이젠 Puppeteer 를 추가해보자

전제조건

  • Jest
  • Typescript
  • Babel

설치

puppeteer 과 jest-puppeteer 설치

1
npm i -D puppeteer jest-puppeteer

Types 설치

1
npm i -D @types/puppeteer @types/jest-environment-puppeteer @types/expect-puppeteer

tsconfig.json 에 types 추가

tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "compilerOptions": {
  ..........
    "types": [
      "jest",
      "puppeteer",
      "jest-environment-puppeteer",
      "expect-puppeteer"
    ],
  ..........
  },
  "exclude": [
    "node_modules"
  ]
}

jest.config.js 에 preset 설정 변경

ts-jest 와 jest-puppeteer 를 preset 으로 설정하기 위해서
두개를 합쳐주는 preset.js 파일을 먼저 만들어 줍니다.

preset.js
1
2
3
4
5
6
7
const ts_preset = require('ts-jest/jest-preset')
const puppeteer_preset = require('jest-puppeteer/jest-preset')

module.exports = Object.assign(
  ts_preset,
  puppeteer_preset
)
jest.config.js
1
2
3
4
5
6
// ts-jest 로 설정되어 있는 것을 위에서 만든 preset.js 파일로 변경합니다
-  preset: "ts-jest",
+  preset: "./preset.js",

// testEnvironment 를 comment 처리 합니다.
   // testEnvironment: "node",

테스트

테스트 파일생성

./test/puppeteer.test.ts
1
2
3
4
5
6
7
8
9
describe('Google', () => {
  beforeAll(async () => {
      await page.goto('https://google.com')
  })

  it('should display "google" text on page', async () => {
      await expect(page).toMatch('google')
  })
})

테스트 수행

1
npm run test

테스트결과

Puppeteer 옵션 추가

puppeteer 옵션 파일 만들기

jest-puppeteer.config.js
1
2
3
4
5
6
module.exports = {
  launch: {
    headless: false,
    timeout: 20000,
  },
};

cross-env 설치

1
npm i -D cross-env

package.json test 스크립트 수정

package.json
1
2
3
4
5
6
7
  "scripts": {
    ..........
-   "test": "jest --colors",
+   "test": "cross-env DEBUG=test JEST_PUPPETEER_CONFIG=./jest-puppeteer.config.js jest --colors --runInBand --detectOpenHandles --config=./jest.config.js"
    ..........
  },

테스트 실행

1
npm run test

이제 웹브라우저 창이 보이고 테스트가 될 겁니다

에러날 경우

ReferenceError: page is not defined

Cannot find name ‘page’ 에러가 날 경우는 type 설정이 안되어서 그렇다.

위의 

1
2
Types 설치
tsconfig.json 에 types 추가

두 가지를 다시 한번 해보시기 바랍니다.

연관포스트