在玩笑单元测试中引用计算属性

Question

我正在为我的 Vuejs 2 (Vuetify) 组件编写一个笑话单元测试。设置非常简单。

在组件内部，我有一个 prop，它是一个带有嵌套字段的对象：

props: ['testObject']

我有一个计算属性，它从该道具返回一个字段：

computed: {
    myField() {
      return this.testObject.testField;
    }
}

我写了一个 Jest 测试：

wrapper = mount(MyComponent, {
            mocks: {
                propsData: {
                    testObject: { testField: 'My Test Value' }
                }
            },
        });

it("should return a test field", () => {
    const field = wrapper.vm.$options.computed.myField();
    expect(field).toBe('My Test Value');
});

当我运行测试时，我得到以下信息：

TypeError: Cannot read property 'testField' of undefined

所以它调用计算属性，但 testObject 未定义。

知道发生了什么事吗？

@vue/test-utils：1.3.0 @vue/vue2-jest：28.0.1 @types/jest：28.1.3 笑话：28.1.1

Answer 1

尝试以这种方式安装您的组件：

wrapper = mount(MyComponent, {
        propsData: {
            testObject: { testField: 'My Test Value' }
        }
    });

查看此文档以获取更多信息。