web-dev-qa-db-ja.com

`vue-test-utils`と` jest`を使った `created`フックでテストする

このようなVueページがあります。

_<template>
</template>

<script>
created(){
    this.doSomething();
}

methods: {
    doSomething() {
        .....
    }
}

</script>
_

さて、我々はこの作成されたフックのテストをしたいと、dosomething（）メソッドが呼び出されることを確認します。

このようにしてみましたが、JestもPackage.jsonに輸入されています

_import {
  shallowMount,
  createLocalVue,
} from '@vue/test-utils';

const localVue = createLocalVue();

import Xyx from '/Xyx.vue';

const init = () => {
  wrapper = shallowMount(Xyx, { localVue });
  cmp = wrapper.vm;
};

describe('#created', () => {
  it('#doSomething', () => {
    init();
    wrapper.setMethods({
      doSomething: jest.fn(),
    })
    expect(cmp.doSomething).toHaveBeenCalled();
  });
});
_

これを作成したフックの単体テストケースを実行できますか？

vue.jsjestjsvuexvue-test-utils
6
Neeladri Rudra

メソッドはcreatedで呼び出されるため、モックを設定する前に実行されます。したがって、テストは失敗します。
[。]メソッドを初期化時にモックと置き換える必要があります（shallowMount）。

describe('Xyz', () => {
  it('should call doSomething() when created', () => {
    const doSomething = jest.fn()
    wrapper = shallowMount(Xyz, {
      localvue,
      methods: { doSomething }
    });
    expect(wrapper.vm.doSomething).toHaveBeenCalled();
  });
});

SideNote：cmpを宣言していない。テストの開始時に、let cmp;があるはずです

非常に似た議論 ここ 。リンクされたコメントの上には、ほとんどのVueコンポーネントライフサイクルフックのプロパティをモック化する方法があります。

3
tao

テストに必要なときにフックを呼び出すことは可能です。たとえば、フックを呼び出す前に一部のデータを偽造する必要がある場合。

import App from '@/App.vue';

// in test
App.created.call(wrapper.vm);
 _

TypeScriptでは、VUE-PROPERTION-DECRATORを使用すると、コンポーネントの形状が変わりますので、次のようにして行う必要があります。

App.extendOptions.created.call(wrapper.vm)
 _
0
Alonad