jest로 자동화된 테스트

소개

지난 주에 정적 분석 도구를 cli-ssg에 추가했습니다. 프로젝트 복잡성 관리 프로세스를 계속하면서 이번 주에는 자동화된 테스트를 추가하는 작업을 했습니다.

자동화된 테스트와 관련하여 선택할 수 있는 프레임워크가 많이 있습니다. 그러나 cli-ssg는 Node.js를 기반으로 구축되었기 때문에 테스트 프로세스를 자동화하기 위해 가장 인기 있고 잘 지원되는 프레임워크 중 하나jest를 선택했습니다.

농담 설정

간단히 jest를 설치하여 시작합니다.

npm install --save-dev jest

test에서 jest부터 npm까지 실행할 간단한 package.json 스크립트 추가:

"scripts":{
  "test": "jest"
}

이제 npm test를 사용하여 테스트를 실행할 수 있었습니다. 또한 테스트 또는 소스 코드가 업데이트될 때 test-watch 변경 사항을 감시하고 자동으로 테스트를 실행하도록 하는 jest 스크립트를 추가했습니다.

"scripts":{
  "test-watch": "jest --watch --"
}

jest가 구성되었으므로 이제 테스트를 작성할 차례입니다!

테스트 작성:

출발점으로 Options 모듈을 테스트하는 것으로 시작했습니다. 보다 구체적으로, validateInput() 경로의 유효성을 검사하고 존재하는 경우 true를 반환하는 this.input 함수를 테스트하기로 결정했습니다.

validateInput() {
    if (!fs.existsSync(this.input)) {
      throw new Error(
        `${this.input} does not exist. Input path must be a file or directory`
      );
    }
    return true;
  }

그것을 테스트하기 위해, 나는 configOptions.js 파일을 생성했고, 이 기능에 대한 가능한 모든 시나리오를 테스트하기 위해 이리저리 몇 번을 반복한 후에 이것이 내가 생각한 것입니다.

describe('validate input tests', () => {
  let options;

  beforeEach(() => {
    options = new Options();
  });

  test('empty, null and undefined paths should throw error', async () => {
    [null, undefined, ''].forEach((p) => {
      options.input = p;
      expect(() => options.validateInput()).toThrow();
    });
  });

  test('non-existing file should throw error', async () => {
    options.input = 'invalidPath';

    expect(() => options.validateInput()).toThrow(
      'invalidPath does not exist. Input path must be a file or directory'
    );
  });

  test('should validate an existing file', async () => {
    fs.existsSync.mockResolvedValue(true);

    expect(options.validateInput()).toEqual(true);
  });
});

첫 번째 단위 테스트가 다운되면서 SSG의 핵심 기능을 테스트하고 싶었습니다. 이를 위해 convertFileToHtml(filePath, stylesheet, lang) 파일을 변환하고 .txt 출력을 생성하는 .html 함수로 범위를 좁혔습니다.

이 기능을 테스트하기 위해 beforeEach() 및 afterAll 도우미를 사용하여 이 함수를 테스트할 수 있는 샘플 입력 파일을 만들고 삭제했습니다.

beforeEach(() => {
    fs.writeFileSync(inputFilePath, fileInput);
  });

  afterAll(() => {
    fs.unlinkSync(inputFilePath);
  });

내가 테스트한 입력 시나리오는 매우 간단했습니다.

- html should be generated
- h1 tag should be generated from txt file
- stylesheet attribute should be rendered as a link tag
- lang attribute should be present in html

테이크 아웃

jest가 구성되고 일부 테스트가 이미 작성되었으므로 이제 코드 적용 범위를 개선할 수 있습니다. 테스트 없이는 기존 코드를 손상시키거나 예상치 못한 버그를 도입하기 쉽기 때문에 자동 테스트를 설정하는 것이 좋았습니다. 좋은 소식은 이제 간단히 npm test를 실행하여 도구를 테스트할 수 있다는 것입니다.

참조

Github 저장소 - https://github.com/dhillonks/cli-ssg
3d3d110 - https://github.com/dhillonks/cli-ssg/commit/3d3d1100350d885a5074a96e9757fa527fcb11c9