如何模拟计算方法以停止测试中的 json 方法错误（Vue-test-utils 和 vuetify）

Question

我遇到了一个问题运行对包含许多较小组件的大型复杂 Vuetify 组件进行测试，重要部分：

<cat-form
    :dogs="dogs"
    :cats="cats"
    >
</cat-form>
.....

  props: [
    'availablecats',
    'avaliabledogs'
  ],
.....
  computed: {

    advertisers() {
      var dogs = JSON.parse(this.avaliabledogs)
      return dogs
    },
    cats() {
      var cats = JSON.parse(this.availablecats)
      return cats
    },

然后使用 Vue-utils 进行测试：

describe('CreateCat', function () {

    let props = {
       avaliablecats : [{
          name: 'cat1',
          age: 2
          },
          {
          name: 'cat2',
          age: 4
          }],
       avaliabledogs : [{
          name: 'dog1',
          age: 3
          },
          {
          name: 'dog2',
          age: 8
          }],
        }

    beforeEach(() => {

      wrapper = mount(CreateCat, {

            propsData: props,
            computed: {
              dogs() {
                 return props.avaliabledogs
              },
              cats() {
                 return props.avaliablecats
              },
          }
        });
    });

    test('true is true', () => {

        expect(true).toEqual(true)
    })


});

这是我收到的错误：

SyntaxError: Unexpected token o in JSON at position 1
        at JSON.parse (<anonymous>)

      143 |
      144 |     cats() {
    > 145 |       var cats= JSON.parse(this.avaliablecats)
          | ^
      146 |       return cats
      147 |     },

首先，我想如果我模拟了道具数据，那么计算方法可以计算并且不会将 this.avaliabledogs 和 this.avaliblecats 视为未定义。但这没有用。

接下来我尝试模拟计算方法，然后根本不会调用该函数。但我仍然收到完全相同的错误。

我还尝试了以下方法作为在安装包装器后设置计算方法和道具的替代方法，而不是在我第一次安装组件时包括它们。

      wrapper.setProps({
       avaliablecats : [{
          name: 'cat1',
          age: 2
          },
          {
          name: 'cat2',
          age: 4
          }],
       avaliabledogs : [{
          name: 'dog1',
          age: 3
          },
          {
          name: 'dog2',
          age: 8
          }],
        })

      wrapper.setComputed({
       cats: [{
          name: 'cat1',
          age: 2
          },
          {
          name: 'cat2',
          age: 4
          }],
       dogs: [{
          name: 'dog1',
          age: 3
          },
          {
          name: 'dog2',
          age: 8
          }],
        })

然后我尝试对使用狗和猫的整个 'cat-form' 组件进行存根。同样，仍然出现错误。

      wrapper = mount(CreateCat, {
            stubs: {
                CatForm: true,
            },

我现在有点不知所措 - 我觉得我使用了正确的语法，但我很困惑为什么计算属性中的方法在我已经调用时仍然被调用模拟了计算函数？

非常感谢任何帮助！

Answer 1

JSON.parse(this.avaliabledogs) 表示 avaliabledogs 属性是有效的 JSON 字符串。虽然在此测试中它是一个对象数组，但将其转换为字符串会产生如下结果：

[object Object],[object Object]

这就是臭名昭著的 SyntaxError: Unexpected token o in JSON 错误。

在这种情况下，不需要模拟计算属性（可以像所示那样完成 here），因为它们太小而不能被视为需要隔离的独立单元；这可以通过适当模拟道具来实现：

 let props = {
   avaliablecats : JSON.stringify([{
      name: 'cat1',
      age: 2
      },
      {
      name: 'cat2',
      age: 4
      }]),
   avaliabledogs : JSON.stringify([{
      name: 'dog1',
      age: 3
      },
      {
      name: 'dog2',
      age: 8
      }]),
 }

如何模拟计算方法以停止测试中的 json 方法错误（Vue-test-utils 和 vuetify）

How do I mock a computed method to stop json method error in my test (Vue-test-utils and vuetify)

vue.js

computed-properties

vuetify.js

jsonparser

vue-test-utils