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：期望未定义等于“我的标题”

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

我通过target.vm.$options调用head()方法的事实是否与此有关？

Answer 1

您需要将上下文传递给您的电话。

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