时间戳

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

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

问题描述

我有一个带有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：预期未定义等于“我的标题”

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

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

标签： javascriptunit-testingvue.jsnuxt.js

解决方案

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

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

推荐阅读