[Vuejs] mocha+chai+sinon 테스트

Sinon / chai / sinon-chai(expect, should) 사용 예제

vuejs 테스트 케이스 작성 방법을 보던 중 spy 기능이 필요해서 관련 코드를 찾아보니 코드가 조금씩 다르다보니 어떤 라이브러를 썼는지 헷갈려서 예제 코드를 작성함....... js에서 테스트 케이스 작성은 처음이다 보니 시작부터 어떻게 하는지 몰라서 삽질 중

• sinon : spy, mock등의 기능을 제공
• chai : 검증 라이브러리
• sinon-chai: chai와 연동을 위한 플러그인
  • chai-sinon 이라는 플러그인도 있음
    https://www.chaijs.com/plugins/chai-sinon/
    https://www.chaijs.com/plugins/sinon-chai/

vue-cli에서 mocha+chai선택 후 아래 npm을 추가 설치함

npm i -D sinon
npm i -D sinon-chai

import Home from "@/views/Home.vue";
import { mount } from "@vue/test-utils";

import chai from "chai";
import sinon from "sinon";
import sinonChai from "sinon-chai";

chai.use(sinonChai); // sinonChai
chai.should(); // should 작성할때

describe("Click event", () => {
  // debugger;
  it("Click on yes button", () => {
    const wrapper = mount(Home);
    const spyCallYes = sinon.spy(wrapper.vm, "callYes");

    wrapper.find("button.yes").trigger("click");

    // sinon - assert
    // const assert = sinon.assert;
    // assert.calledOnce(spyCallYes);
    // assert.match(true, spyCallYes.returned(false));

    // chai - assert
    // const assert = chai.assert;
    // assert.isTrue(spyCallYes.calledOnce);
    // assert.isTrue(spyCallYes.returned(false));

    // sinon-chai - should
    // spyCallYes.should.have.been.calledOnce.and.returned(false);

    // sinon-chai - expect
    // const expect = chai.expect;
    // expect(spyCallYes).to.have.been.calledOnce.and.returned(false);

    spyCallYes.restore();
  });
});

• Home.vue

<template>
  <div>
    <!-- 아래와 같이 click 메소드를 작성하면 테스트 케이스 실패함
        <button class="yes" @click="callYes">Yes</button>
        -->
    <button class="yes" @click="callYes()">Yes</button>
  </div>
</template>

<script>
  export default {
    name: "HomeComponent",
    methods: {
      callYes() {
        console.log("----callYes");
        return false;
      }
    }
  };
</script>

https://www.chaijs.com/
https://www.npmjs.com/package/sinon-chai