NPM) Puppeteer 를 사용한 통합 테스트

✏️ Setting

📍 모듈 설치

• puppeteer 를 설치한다.
  • puppeteer 는 헤드리스 크롬 브라우저를 제어하기 위한 모듈이다.
  • 헤드리스 브라우저는 UI 가 없다는 특징을 갖고있다.

npm install --save-dev puppeteer

• 지정한 포트에서 앱을 시작할 수 없을 때 발생하는 오류를 막기 위해 사용할 수 있는 포트를 찾아주는 유틸리티 모듈도 설치한다.
  • test 환경에서 고정적인 port 가 아닌 자유로운 포트에서 서버를 실행할 수 있음

npm install --save-dev portfinder

📍 애플리케이션 설정

• 지금까지는 서버가 실행될 때 Express 로 시작되도록 했지만,
  테스트하기 편한 환경을 만들기 위해 설정을 변경시켜주는게 좋다.
  - 모듈이 직접 실행될 때는 Express 로 실행
  - 모듈이 다른 모듈에 의해 import 될 때는 Express 를 외부로 보내도록 설정

if(require.main === module) {
    app.listen(port, () => {
        start('EXPRESS  START')
        console.log(
            `Express started on http://localhost:${port};`,
            `\npress Ctrl-C to terminate.`
        )
    })
} else {
    module.exports = app
}

✏️ 통합 테스트 작성하기

📍 HTML 작성

• main 페이지에서 about 페이지로 이동하는 링크에 data-test-id 속성을 추가했다.
  • 헤드리스 브라우저를 사용해 a 태그를 해당 속성을 이용해 찾을 수 있는 일종의 표시이다.

<h1>Welcome to Meadowlark Travel</h1>
<p>Questions? Checkout out our
<a href="/about" data-test-id="about">About Us</a></p>

📍 Test 코드 작성

• 아래 통합테스는 아래의 절차를 따른다.
  1. 설치해준 모듈들을 import 하고, 루트파일도 import 해준다.
  2. 테스트 시작 전 Express 를 실행시키고 테스트 종료전 서버를 종료해준다.
  3. puppeteer 를 사욯해 헤드리스 크롬을 띄우고 검증을 원하는 url 에 접속한다.
  4. html 파일에 마킹해둔 표시를 찾아 link 에 접속한다.
  5. 현재 url 이 about 페이지를 요청하는 ulr 이 맞는지 검증한다.

// src/integration-tset/basic-navigation.js

const portfinder = require('portfinder')
const puppeteer = require('puppeteer')

const app = require('../app')

let server = null
let port = null

beforeEach(async () => {
    server = app.listen(port)
})

afterEach(() => {
    server.close()
})

// puppeteer 는 대부분 비동기적으로 작동되기 때문에 await 를 사용해야 한다.
test('통합: 홈페이지 링크 작동', async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto(`http://localhost:${port}`)
    await Promise.all([
        page.waitForNavigation(),
        page.click('[data-test-id="about"]'),
    ])
    expect(page.url()).toBe(`http://localhost${port}/about`)
    await browser.close();
})