javascript - Vue.js + Nuxt.js - 当我对 head() 方法进行单元测试时，为什么我的计算属性未定义？

Question

我有一个带有 head() 的 Vue.js + Nuxt.js 组件方法:

<script>
    export default {
        name: 'my-page',
        head() {
            return { title: `${this.currentPage}` };
        },
        ...
    }
</script>

currentPage 是一个计算属性。

当我运行我的应用程序时，组件会正确运行并将页面标题设置为正确的值。

当我从 Jest + Vue Test Utils 单元测试运行这段代码时，代码失败了:

it('should set the title to "my page"', () => {

    const options = {
        computed:{
            currentPage: () => {
                return 'My Title';
            }
        }
    };

    const target = shallowMount(MyPage, options);

    const actual = target.vm.$options.head();

    expect(actual.title).to.equal("My Title");

});

测试失败并显示消息:

AssertionError: expected undefined to equal 'My Title'

即使我模拟了计算属性，为什么它仍未定义？

我通过target.vm.$options 调用head() 方法与它有什么关系吗？

Answer 1

您需要将上下文传递到您的 head 调用中。

const actual = target.vm.$options.head.call(target.vm);