Как смоделировать вычисленный метод, чтобы остановить ошибку метода json в моем тесте (Vue -test-utils и vuetify) - PullRequest
Новая
       33

Как смоделировать вычисленный метод, чтобы остановить ошибку метода json в моем тесте (Vue -test-utils и vuetify)

1 голос
/ 06 апреля 2020

У меня проблема с запуском теста на большом сложном компоненте 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 и это .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
          }],
        })

Затем я попытался заглушить весь компонент «кошачья форма», который использовал собак и кошек. Опять же, все еще получаю ошибку. 

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

Сейчас я немного растерялся - я чувствую, что использовал правильный синтаксис, но я запутался, почему методы в вычисляемом свойстве все еще вызывается, когда я высмеиваю вычисляемую функцию?

Любая помощь будет очень признательна!

1 Ответ

1 голос
/ 06 апреля 2020

JSON.parse(this.avaliabledogs) означает, что avaliabledogs prop является действительной JSON строкой. Хотя в этом тесте это массив объектов, преобразование его в строку приводит к чему-то вроде: 

[object Object],[object Object]

Это то, что указывает на печально известную ошибку SyntaxError: Unexpected token o in JSON.

В этом случае нет необходимо смоделировать вычисленные свойства (это можно сделать так, как показано здесь ), поскольку они слишком малы, чтобы считаться отдельными единицами, которые необходимо изолировать; это может быть достигнуто с правильно смоделированным реквизитом: 

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