흠.,.
837
2019-08-13 17:11:29
0
669

vuejs + mocha + chai + sinon test 케이스 예제


Vuejs 테스트 코드 작성시 spy 관련 예제를 찾아보니

사용 라이브러리에 따라 조금씩 코드가 달라서

동일 테스트 내용을  Sinon / chai / sinon-chai(expect, should) 사용에 따라 작성했습니다.


작업 환경은 vue cli에서 mocha+ chai 를 선택했으며

아래 2개의 npm을 추가로 설치했습니다.

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


테스트 내용은 버튼을 클릭했을때 메소드 호출 여부와 리턴값을 체크하는 내용입니다.

- test.spec.js

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

0
0
  • 댓글 0

  • 로그인을 하시면 댓글을 등록할 수 있습니다.