[javascript] Chai를 사용하여 AJAX 호출을 테스트하는 방법은?

04 Dec 2023

javascript

프런트엔드 개발을 하다보면 AJAX 호출을 테스트해야 할 일이 많이 생깁니다. 이때 Chai는 Mocha와 함께 많이 사용되는 자바스크립트 테스팅 라이브러리입니다. Chai를 사용하여 AJAX 호출을 테스트하는 방법을 알아보겠습니다.

먼저 Chai를 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 Chai를 설치합니다.

npm install chai

Chai는 다양한 assertion 스타일을 지원합니다. 대표적으로 expect와 should가 있습니다. 이 예제에서는 expect 스타일을 사용하겠습니다.

const chai = require('chai');
const expect = chai.expect;
const sinon = require('sinon');
const axios = require('axios');

describe('AJAX 호출 테스트', () => {
  let server;

  beforeEach(() => {
    server = sinon.fakeServer.create();
  });

  afterEach(() => {
    server.restore();
  });

  it('성공적인 AJAX 호출', () => {
    const responseData = { name: 'John', age: 25 };
    const expectedURL = '/api/user/1';

    server.respondWith('GET', expectedURL, [
      200,
      { 'Content-Type': 'application/json' },
      JSON.stringify(responseData),
    ]);

    // AJAX 호출
    axios.get(expectedURL)
      .then((response) => {
        expect(response.status).to.equal(200);
        expect(response.data).to.deep.equal(responseData);
      });

    server.respond();
  });
});

위의 예제에서는 AJAX 요청이 성공적으로 이루어졌을 때의 테스트를 작성하였습니다. sinon을 사용하여 가짜 서버를 생성하고, server.respondWith() 메서드를 사용하여 특정 URL에 대한 AJAX 요청에 대한 응답을 설정합니다. 그리고 axios를 사용하여 실제로 AJAX를 호출한 후, 응답에 대한 검증을 수행합니다.

여기서는 응답 상태 코드가 200인지와 응답 데이터가 예상한 데이터와 동일한지를 검증하였습니다. Chai의 expect를 사용하여 검증을 수행하며, .to.equal()과 .to.deep.equal()을 사용하여 비교 연산을 수행합니다.

위의 예제에서는 성공적인 AJAX 호출에 대한 테스트를 작성하였습니다만, 이외에도 실패하는 경우나 에러 처리에 대한 테스트를 작성할 수 있습니다.

더 자세한 Chai의 사용법은 공식 문서를 참고하시기 바랍니다.

Chai 공식 문서