jest.spyOn 如何监听vue的 created生命周期

jest.spyOn 是 Jest 测试框架提供的一个功能，用于创建一个间谍（spy）来监视对象上的方法调用。然而，直接使用 jest.spyOn 来监听 Vue 组件的生命周期钩子如 created 并不是最直观的方法，因为这些钩子并不是组件实例上的公开方法，而是由 Vue 框架内部管理的。

为了测试 Vue 组件的生命周期钩子，特别是像 created 这样的早期钩子，你可以采取以下几种策略：

方法 1: 使用 Composition API 和 setup 函数

如果你使用的是 Vue 3 和 Composition API，那么可以在 setup 函数中定义你的逻辑，并且可以通过测试 setup 函数的行为来间接验证 created 钩子中的逻辑。

import { defineComponent } from 'vue';
import { shallowMount } from '@vue/test-utils';

const MyComponent = defineComponent({
  setup() {
    console.log('Component created');
  },
});

test('calls the setup function', () => {
  const spy = jest.spyOn(console, 'log').mockImplementation();
  shallowMount(MyComponent);
  expect(spy).toHaveBeenCalledWith('Component created');
  spy.mockRestore();
});

方法 2: 使用 Options API 和全局混入 (Mixins)

对于 Vue 2 或者使用 Options API 的情况，可以利用 Vue 的全局混入（global mixin）特性，在所有组件实例化时注入自定义逻辑，从而实现对生命周期钩子的监听。

import Vue from 'vue';
import { shallowMount } from '@vue/test-utils';

// 创建一个混入来包裹原始的 created 钩子
const createdSpy = jest.fn();
Vue.mixin({
  created() {
    createdSpy();
    if (typeof this.$options.created === 'function') {
      this.$options.created.call(this);
    }
  },
});

// 定义一个简单的组件
const MyComponent = {
  created() {
    console.log('Component created');
  },
};

test('calls the created hook', () => {
  shallowMount(MyComponent);
  expect(createdSpy).toHaveBeenCalled();
});

这种方法通过在每个组件初始化之前插入自己的代码来捕获生命周期事件。需要注意的是，全局混入会影响所有的组件实例，所以在测试结束之后应该清除它们以避免影响其他测试。

方法 3: 直接测试副作用

另一种方式是不直接监听 created 钩子本身，而是检查该钩子中执行的具体行为或副作用。例如，如果 created 钩子中调用了某个方法或改变了某些状态，你可以直接测试这些变化是否按预期发生。

import { shallowMount } from '@vue/test-utils';

const MyComponent = {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.message = 'Component created';
  },
  template: `<div>{{ message }}</div>`
};

test('sets the correct initial message in the created hook', () => {
  const wrapper = shallowMount(MyComponent);
  expect(wrapper.vm.message).toBe('Component created');
});

在这个例子中，我们并没有显式地监听 created 钩子，但通过检查组件的状态（即 message 属性），我们可以确认 created 钩子已经正确执行了它的任务。

总结

虽然 jest.spyOn 可以用来监控对象的方法调用，但对于 Vue 组件的生命周期钩子来说，更好的做法是利用 Vue 提供的工具和机制来进行测试。无论是通过 Composition API 的 setup 函数、全局混入还是直接测试副作用，都有助于确保你能够有效地验证 created 钩子中的逻辑是否按照预期工作。选择哪种方法取决于你的具体需求以及所使用的 Vue 版本和技术栈。