Question

我正在使用Jest在Vue.js上测试我的Activity.vue组件。

我的Activity.vue组件在initializeTable()内调用created()方法，以初始化我的tableRows属性。

问题是，当我运行测试时，Jest不会调用'created（）'方法，因此，它没有初始化我的tableRows属性，然后测试表明我的{{1 }}属性等于tableRows（原始状态）。

用Jest测试时如何调用[]方法？

我已经尝试在测试中显式调用它（即created()），但无济于事。

有人会解决吗？

我在下面提供我的代码。

谢谢。

Activity.spec.js

wrapper.vm.$created()

Activity.vue

import { shallowMount } from '@vue/test-utils'
import Activity from '@/views/Activity.vue'
import api from '@/assets/js/api'

const expectedTableRows = [...]

const $t = () => {}

api.getActivity = jest.fn(
  () => Promise.resolve({
    data: [...]
  })
)

describe('Activity.vue', () => {
  it('renders vm.tableRows in created()', () => {
    const wrapper = shallowMount(Activity, {
      mocks: { $t }
    })
    // wrapper.vm.$created()
    expect(wrapper.vm.tableRows).toEqual(expectedTableRows)
  })
})

编辑1：解决方案

如Husam Ibrahim所述，该函数是异步的，因此，我需要使用以下tips重构测试，现在我可以对其进行修复。

我在下面提供正确的代码：

import api from '@/assets/js/api'

export default {
  data () {
    return {
      tableRows: []
    }
  },
  created () {
    this.initializeTable()
  },
  methods: {
    initializeTable () {
      this.loading = true

      api.getActivity().then(response => {
        this.tableRows = response.data
      }).catch(error => {
        this.errorBackend = error
      }).finally(() => {
        this.loading = false
      })
    }
  }
}

在Vue.js的Jest测试中调用'created'方法

0 个答案: