Обновите реквизиты в экземпляре vue для unittest

Question

Я собираюсь протестировать некоторое поведение в компоненте Vue, которое происходит только при смене реквизита. Компонент Vue выглядит аналогично этому компоненту, соответствующая логика для теста происходит в наблюдателе.

<script>
export default {
  components: {
  },
  props: {
    examleProp: {
      type: Boolean,
      required: false,
      default: false,
    }
  },
  watch: {
    exampleProp: function(newVal, oldVal) {
        // logic which needs to be tested
    },
  }
};
</script>

<template>
  <h1>hello world</h1>
</template>

Тестовая логика работает нормально при следовании приведенному ниже подходу.

it('example test', done => {
    let wrapper = mount(exampleComponent, {
        propsData: {
        },
        template: `
        <example-component >
        </example-component>
    `
    });

    wrapper.setProps({
        isSubmitting: true
    });
});

Наблюдатель вызван и готов к тестированию, все хорошо.

Поскольку тест должен быть интегрирован в набор тестов, существуют некоторые ограничения. Компонент не монтируется, но его экземпляр выглядит следующим образом:

it('example test', done => {
     let wrapper = new Vue({
      components: {
        exampleComponent,
      },
      template: `
        <example-component></example-component>
      `,
    }).$mount();

    // how to update props now?
    // wrapper.setProps  && wrapper.$setProps are both undefined
});

Итак, я пытаюсь достичь способа обновления реквизитов экземпляра компонента, чтобы запускать наблюдатель для запуска, любойИдеи на это?

Answer 1

Если вам абсолютно необходимо использовать фактический экземпляр Vue в наборе тестов вместо оболочки test-utils, вы можете сделать это:

1. Обновите реквизит, сделав его зависимым от произвольных данныхсвойство самого экземпляра Vue (т. е. vm.unchanged).
2. Вставить вызов vm.$set в ловушку vm.mounted() жизненного цикла, которая изменяет vm.unchanged, таким образом вызывая watch в exampleComponent.exampleProp.

const exampleComponent = {
  components: {
  },
  template: `<div>
<h1 style="color: green">ExamleProp unchanged: {{ exampleProp }}</h1>
<h1 style="color: red">Updated: {{ updated }}</h1>
</div>`,
  props: {
    exampleProp: {
      type: Boolean,
      required: false,
      default: false,
    }
  },
  data() {
    return {
      updated: false,
    };
  },
  watch: {
    exampleProp: function(newVal, oldVal) {
        this.updated = true;
    },
  }
};

const vm = new Vue({
      el: '#app',
      components: {
        exampleComponent,
      },
      data: {
        unchanged: true,
      },
      template: `
        <example-component :example-prop="unchanged"></example-component>
      `,
      mounted() {
        this.$set(this, 'unchanged', false);
      } 
    }).$mount();

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Надеюсь, это поможет!