Vue экспортировать только «методы» в Jest, когда я запускаю модульное тестирование, как экспортировать «данные» и другие? - PullRequest
Новая
       35

Vue экспортировать только «методы» в Jest, когда я запускаю модульное тестирование, как экспортировать «данные» и другие?

0 голосов
/ 03 ноября 2019

У меня очень маленький проект Vue, выглядит следующим образом:

файл для тестирования: src/views/Sum.vue

<template>
  <div>
    Sum of ({{a}},{{b}}) is: {{sum()}}
  </div>
</template>

<script>
export default{
  data: function(){
    return {
      a: 1,
      b: 2
    }
  },
  methods: {
    sum: function(){
      console.info("-- in Sum.vue, this: ", this)
      return this.a + this.b
    }
  }
}
</script>

и файл теста jest выглядит следующим образом: 

import { shallowMount } from "@vue/test-utils"
import Sum from '@/views/Sum.vue'

describe('Sum.vue', () => {
  it('should run sum', () => {
    console.info("-- in sum.spec.js, Sum is: " )
    console.info(Sum)
    expect(Sum.methods.sum()).toBe(3)
  })  
})

когда я запустил тест на $ npm run test:unit, я получил ошибки: 

      -- in sum.spec.js, Sum is: 
      { data: [Function: data],
        methods: { sum: [Function: sum] },
        render: [Function: render],
        staticRenderFns: [] }
      -- in Sum.vue, this:  { sum: [Function: sum] }

  ● Sum.vue › should run sum

    expect(received).toBe(expected) // Object.is equality

    Expected: 3
    Received: NaN

       6 |     console.info("-- in sum.spec.js, Sum is: " )
       7 |     console.info(Sum)
    >  8 |     expect(Sum.methods.sum()).toBe(3)
         |                               ^
       9 |   })
      10 | })
      11 | 

      at Object.it (tests/unit/say_one.spec.js:8:31)

Похоже, что this действует по-разному в этих двух контекстах:

  • в спецификации (this = Sum.methods)
  • в коде реализации (this = [Sum.data, Sum.methods, Sum.render])

, поэтому мой вопрос:

Как сделать модульные тестык методам, которые ссылались на переменные data? (так же, как приведенный выше код)

большое спасибо!

1 Ответ

1 голос
/ 03 ноября 2019

ОК, я понял.

благодаря @Alexander Staroselsky, я должен использовать wrapper.vm вместо `Sum 'в моем коде.

правильный файл модульного теста должен быть: 

import { shallowMount } from "@vue/test-utils"
import Sum from '@/views/Sum.vue'

describe('Sum.vue', () => {
  it('should run sum', () => {

    // expect(Sum.methods.sum()).toBe(3)     <--  here I used Sum.methods.sum()

    // below is correct. 
    const wrapper = shallowMount(Sum)
    expect(wrapper.vm.sum()).toBe(3)     
  })  
})

wrapper.vm - интересный объект, вы можете напрямую обращаться к переменной и методам, например: 

wrapper.vm.a  # => vue.data.a
wrapper.vm.b  # => vue.data.b
wrapper.vm.sum # =>  vue.methods.sum

поэтому код shallowMount() настолько важен, что бы вы ни хотели проверить вывод HTML или нет, вы должны написать эту строку кода.

...