jest.spyOn组件特性

Question

jest.spyOn组件属性可以吗？我需要确保isLoading总是true

export default {  
  data() {
    return {     
      isLoading: false,
    };
  },
  methods: {
    async loadData() {
      this.isLoading = true;
    }
  }
}

Answer 1

您不能监视数据属性，但在这种情况下并不需要监视数据属性。

相反，您可以删除loadData()，并使用isLoading的初始值挂载组件。

1. 将MyComponent.methods.loadData设置为jest.fn()以将其存根。
2. 使用初始data()属性挂载组件，返回isLoading属性的true。

import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent', () => {
  it('sets isLoading', () => {
    1️⃣
    MyComponent.methods.loadData = jest.fn()

    const wrapper = shallowMount(MyComponent, {
      2️⃣
      data() {
        return {
          isLoading: true,
        }
      },
    })

    expect(wrapper.vm.isLoading).toBe(true)
    expect(wrapper.text()).toContain('Loading...')
  })
})

演示