본문 바로가기
IT/Frontend

테스트도구

by DOSGamer 2022. 9. 20.
반응형

테스트 프레임워크

  • jest : https://jestjs.io/ (facebook 에서 만든 테스트 프레임워크로 React 와 많이 사용)

mocha

구조

describe(
	describe(
		it(
		)
		it(
		)
	)
	describe(
		it(
		)
		it(
		)
	)
)

Hook

before() : 전체 테스트 전 => 테스트 전에 기본 세팅을 설정하는 용도
beforeEach() : 각 단위테스트 직전
afterEach() : 각 단위테스트 직후
after() : 전체 테스트 후 => before 에서 설정한 것들을 반환하는 용도

assertion 라이브러리

  • chai : 많이 사용하는 assertion library https://www.chaijs.com/
    • Should : chai.should()
    • Expect : let expect = chai.expect;
    • Assert : let assert = chai.assert;

자주 사용하는 예제

expect(결과값).to.equal(기대값)

expert(객체결과값).to.deep.equal(객체기대값)

expect(결과값).to.be.a(기대 타입)

expect(예외던지는함수).to.throw(예외)

mocking 라이브러리

mocking 라이브러리를 사용하는 이유 side effects 가 발생되는 functions 을 테스트 할 때 사용한다

functions with side effects : 개체의 상태, 현재 시간, 데이터베이스 호출

functions without side effects : 변수에만 의존하는 함수 ex) 1+1 ⇒ 2

  • sinon : spy, stub, fake 를 지원해주는 라이브러리 https://sinonjs.org/
    • spy : 함수 호출에 대한 정보를 얻는 데 사용
      • 함수가 얼마나 많이 호출되었는지 확인
      • 함수에 어떤 인수가 전달되었는지 확인
      • 함수가 실행됨
    • stub : 함수를 대체하는 점만 spy 와 다름
      • 오류를 발생시켜서 오류 케이스를 테스트 할 수 있다
      • 네트워크 연결, 데이터베이스 연동, 외부스크립트 연동시 사용가능
      • 비동기 코드 테스트를 단순화하기 위해서 사용
      • 함수가 실행안됨
    • mock : spy 와 stub 이 할 수 있는 모든 것을 할 수 있다
      • stub 보다 더 구체적인 검증이 필요할 때 사용
      • mock 은 구체적으로 검증할 때 사용하는데 코드가 변경될 때 테스트 코드가 깨질 확률이 높다
  • sinon.test 로 wrapping 해서 사용하는게 좋다
    • 자동으로 초기화 되어 .restore() 를 일일히 안해줘도 된다
      • wrapping 하면 함수 호출이 this 로 변경된다
        • sinon.spy ⇒ this.spy
        • sinon.stub ⇒ this.stub
        • sinon.mock ⇒ this.mock
describe("파일명이나클래스명", () => {
	describe("테스트A그룹", () => {
		it("메소드명_성공", sinon.test(function() {
		});
  • 비동기 함수를 테스트 할때는 타이머를 꺼야 한다
sinon.config = {
	useFakeTimers: false
}

테스트커버리지 도구

테스트 방법

given > mocking > when > then 패턴으로 작성한다

describe("파일명이나클래스명", () => {
	describe("테스트A그룹", () => {
		it("메소드명_성공", () => {
		});
		it("메소드명_실패_원인", () => {
		});
	});
	describe("테스트B그룹", () => {
		it("메소드명_성공", () => {
		});
		it("메소드명_실패_원인", () => {
		});
	});
});

비동기 함수 처리는 before, beforEach, it 에서 한다 (describe 에서 하지 않는다)

describe("REST/login", () => {
  // eslint-disable-next-line no-undef
  describe("Input Check", () => {
    it("loginUser_fail_missingID", async () => {
      let result = await loginController(
        {
          ...apiGatewaySample,
          queryStringParameters: { password:"passw0rd" }
        }
      );
      result.should.property('body','{"message":"Userid is required"}');
    });
    // eslint-disable-next-line no-undef
    it("loginUser_fail_missingPassword", async () => {
      let result = await loginController(
        {
          ...apiGatewaySample,
          queryStringParameters: { id:"skykbc" }
        }
      );
      result.should.property('body','{"message":"Password is required"}');
    });
  });


Uploaded by N2T

반응형

'IT > Frontend' 카테고리의 다른 글

환경변수설정  (0) 2022.09.20
Regex 정규식 표현방법 정리  (0) 2022.08.26
ESLint 규칙  (0) 2022.08.25
Vue.js 개발환경  (0) 2020.03.09
예제로 배우는 Vue.js  (0) 2020.03.05
프론트엔드 개발자를 위한 크롬 Extensions 과 Online Tools  (0) 2020.02.25
Our Next Web Framework is Vue  (0) 2020.02.13
AWS Lambda 를 이용한 Nuxt.js 프로젝트 구현  (0) 2019.12.03