Используя Jest, как мне подсмотреть метод расширенного компонента при модульном тестировании одного файлового компонента в vue.js - PullRequest
Новая
       5

Используя Jest, как мне подсмотреть метод расширенного компонента при модульном тестировании одного файлового компонента в vue.js

0 голосов
/ 06 сентября 2018

В настоящее время я пытаюсь получить единичный файловый компонент (ComponentB), протестированный с использованием Jest и vue-test-utils. ComponentB extends ComponentA, для которого определен метод update(product). 

/* -------- Component B -------- */
<script>
import ComponentA from './ComponentA'
export default {
  extends: ComponentA,
  props: [...],
  data: () => {
    productData: {foo: 'bar', baz: 'shiz'}
  },
  methods: {
    updateProduct() {
      this.update(this.productData)
    }
  }
}
</script>

/* -------- Component A -------- */
<script>
export default {
  props: [...],
  data: () => {...},
  methods: {
    update(productData) {
      ...
    }
  }
}
</script>

Затем я пытаюсь выполнить модульный тест, в котором я shallowMount() мой ComponentB и пытаюсь jest.spyOn метод update(productData), определенный в ComponentA. Тест выглядит так: 

it('calls update with data when input is added to the field', () => {
  const spy = jest.spyOn(ComponentA, 'update);
  const wrapper = shallowMount(ComponentB, { propsData: { ... } });
  const contractIdInput = wrapper.find('#contract-id-input > b-form-input');    

  contractIdInput.element.value = 'foobar';
  contractIdInput.trigger('input')

  expect(spy).toHaveBeenCalledWith(...someDataHere...)
});

Когда я запускаю этот тест, я получаю Cannot spy the update property because it is not a function; undefined given instead.

Я не совсем уверен, почему это не работает, хотя у меня действительно есть некоторые идеи.

Во-первых, поскольку я shallowMount() использую свой ComponentB, он ничего не узнает о своем родительском компоненте и, следовательно, не имеет доступа к методу update(productData), который определен в ComponentA.

Во-вторых, возможно, я не вызываю jest.spyOn() в нужное время и должен вместо этого вызывать его после создания объекта-оболочки ComponentB. Тем не менее, я попытался изменить это и не добился успеха или другого поведения.

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

1 Ответ

0 голосов
/ 18 апреля 2019

ComponentA - это определение компонента с update в качестве дочернего элемента атрибута methods, поэтому update не будет найдено в ComponentA или ComponentB. spyOn следует применять вместо экземпляра компонента. 

const wrapper = shallowMount(ComponentB, { propsData: { ... } });

// create a spy on the instance method
const spyUpdate = jest.spyOn(wrapper.vm, 'update')

// replace the instance method with the spy
wrapper.setMethods({ update: spyUpdate });

// your tests ...

// verify the spy was called
expect(spyUpdate).toHaveBeenCalled();

// remove the spy
spyUpdate.mockReset();
...