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 属性.[=19= 返回 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...')
  })
})

demo