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

我在一个大型复杂的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
    },

这是我收到的错误：

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 |     },

然后，我试着将使用猫和狗的整个“猫形”组件剪断。再一次，仍然得到错误

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

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

任何帮助都将不胜感激

JSON.parse（this.availabledogs）

意味着

availabledogs

prop是有效的JSON字符串。虽然在本测试中它是一个对象数组，但将其转换为字符串会产生如下结果：

[object Object],[object Object]

这就是臭名昭著的

SyntaxError:JSON

error中意外的标记o所表示的

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

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

---

至于存根，我希望将

CatForm

视为不同的组件。

stubs:{'cat form'：true}

有效吗？非常感谢！好几天来我一直在努力让它工作！很高兴这有帮助。

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

[object Object],[object Object]

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