Блог

Я хочу протестировать метод тестирования в Test.vue, но TestMethod использовал mixin, который импортируется из App.js.

Test.vue

 <script>
    export default {
        methods: {
            testMethod() {
                return 'get' this.getTestMixin();
            }
        },
    };
</script>
  

mixins/common.js

 export default {
    methods: {
        getTestMixin() {
            return 'test';
        },
    },
};
  

Как имитировать смешивание? Я пытался издеваться над микшированием следующим образом, но потерпел неудачу, есть идеи, что я делаю не так?

 function getTestMixin() {
    return 'test';
}

const localVue = createLocalVue()
localVue.mixin(getTestMixin)

const wrapper = shallowMount(Test, {
    localVue,
})
  

сообщение об ошибке выглядит следующим образом:

 TypeError: Cannot read property 'props' of undefined
  46 | beforeEach(() => {
> 47 |  wrapper = shallowMount(Test, {
     |          ^
  48 |      localVue,
  49 |  });
  50 | });
  

Микширование может быть имитировано, если они заменены перед мелким монтированием. Что-то вроде:

 const localVue = createLocalVue();

const mockMixin = {
  methods: {
    mixinMethod() {
        return 'test';
    },
  }
}

const MockedTestComponent = { ...TestComponent, mixins: [mockMixin] };

const wrapper = shallowMount(MockedTestComponent, {
  localVue,
});

expect(wrapper.vm.mixinMethod()).toEqual('test');
  

С Vue 3 и с использованием Vue Test Utils это просто вопрос использования Jest для имитации отдельного метода.

     const wrapper = mount(Test, {
        global: {
            mixins: [common],
        },
    } as any)

    jest.spyOn(wrapper.vm, 'getTestMixin').mockImplementation()
  

Таким образом, возвращаемое значение из TestMethod() будет просто 'get' .

Обратите внимание, что Jest издевается над этим, не заботясь о том, что метод находится в микшировании, а не в компоненте Vue.