typescript - 如何在 Jest 单元测试中模拟 `created` Vue 生命周期钩子(Hook)中调用的方法，而不使用 `methods` 中已弃用的 `shallowMount` 参数？

Question

这个问题在这里已经有了答案:





Mocking methods on a Vue instance during TDD

(2 个回答)


去年关闭。




注意:链接的“重复”问题和答案不能回答我的问题，请投票重新打开或以其他方式解释为什么在评论中关闭此问题
我有一个 created()调用的钩子(Hook) doSomething()方法。我可以通过通过 methods 来让测试通过参数为 shallowMount()并覆盖 jest.fn() .
但是，当我采用这种方法时，我收到了关于 methods 的弃用警告。 :

console.error
[vue-test-utils]: overwriting methods via the `methods` property is deprecated and will be removed in 
the next major version. There is no clear migration path for the `methods` property - Vue does not 
support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from 
the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

测试组件.Vue:

...

created() {
    doSomething();
}

...

methods: {
    doSomething(): void { /* do something */ }
}

TestComponent.test.ts:

// mounting method used for tests
function genMount() {
    const doSomething = jest.fn();
    const el = document.createElement('div');
    document.body.appendChild(el);

    return shallowMount(TestComponent, {
        localVue,
        methods: { doSomething },  // deprecated param
        store,
        mocks,
        attachTo: el,
        stubs
    });
}

如何模拟 created() 中调用的方法勾不通 methods至 shallowMount()解决弃用警告？
或者，有没有办法模拟或绕过 created()生命周期钩子(Hook)？
根据警告建议，我意识到我可以导入该方法并对其进行模拟以进行测试，但我正在寻找替代方法，尤其是在这种方法太过分的情况下。

Answer 1

哇，我什至不知道这已被弃用。这是我一直在测试在 mounted 期间调用的方法的方式也是，所以这就是我发现的。就个人而言，我会继续第一个选择。
如果你愿意改变你的测试理念而不是你的编码风格:

I guess the solution is to not test if those methods are called, but if their effects are applied. That's all good, until you deal with the DOM (where Jest/JSDOM in some cases severely lacks functionality).

Source

否则，如果你愿意改变你的编码风格而不是你的测试理念:

One immediately work around that comes to mind (maybe not ideal) would be to put said method in another file and import it. Then you could use jest.mock.

Source

其他人建议消除错误:

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

config.showDeprecationWarnings = false;

...但我认为这可能会导致比解决的问题更多的问题。如果不是现在，那么以后。除非你的项目决定永远不更新到更新的 Vue 版本，我想？
这些是我能够挖掘的唯一解决方案。我希望我能找到更好的答案。如果我们能在 created 之间的某个地方暂停一下就好了和 mounted并模拟一个方法，但我什至不确定那个方法对象是否存在，我不知道如何找出。