如何测试在其创建的挂钩内使用存储操作的组件

时间:2019-11-25 17:57:53

标签: vuejs2 jestjs vue-test-utils

我有一个带有以下created钩子的组件,我正在尝试为该组件编写一些测试

  async created () {
    this.result = await this.applyFilter({ keyword: this.keyword })
    this.bids = this.result.Bids
    this.count = this.result.Count
    this.pages = this.result.Pages
    console.log('Result: ', this.result)
  },

这是测试:

import { createLocalVue, mount } from '@vue/test-utils'
import mutationobserver from 'mutationobserver-shim'
import flushPromises from 'flush-promises'
import Vuex from 'vuex'
import BootstrapVue from 'bootstrap-vue'
import Bids from '@/views/bids/Bids'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library as faLibrary } from '@fortawesome/fontawesome-svg-core'
import { faSearch, faUndo, faRandom, faTrashAlt } from '@fortawesome/free-solid-svg-icons'

faLibrary.add(faSearch, faUndo, faRandom, faTrashAlt)

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(BootstrapVue)
localVue.use(mutationobserver) // This is a necessary polyfill for Bootstrap-Vue
localVue.component('font-awesome-icon', FontAwesomeIcon)

describe('Bids component tests', () => {
  let store
  let modules
  let wrapper

  const $route = { path: '/bids' }

  const bidsDashBoardData = {
    'dxp_dashboardref': 4,
    'dxp_position': 1,
    'db_name': 'Bids',
    'dxp_ref': 991,
    'dxp_hidden': 0
  }

  const user = {
    'psref': 30288,
    'psname': 'asfsafsafsa',
    'md_clock': 1318,
    'md_picture': './images/400/IMG_5862',
    'auids': 'asfsafsa',
    'isAuthenticated': true,
    'expires': '[native Date Mon Nov 25 2019 17:02:24 GMT+0000 (Greenwich Mean Time)]'
  }

  let bids = [
    { 'wf_ref': 584, 'ref': 6140, 'title': 'Bid No. 6140', 'value': 'Windermere Steamboat Museum #2', 'order': 1, 'status': 'Lost / Cancelled', 'type': 'bids', 'to': 'app.bids' },
    { 'wf_ref': 1942, 'ref': 7634, 'title': 'Bid No. 7634', 'value': 'The Dragon School Music Building', 'order': 2, 'status': 'Lost', 'type': 'bids', 'to': 'app.bids' },
    { 'wf_ref': 585, 'ref': 7635, 'title': 'Bid No. 7635', 'value': 'Lambeth Palace Library and Archive', 'order': 3, 'status': 'Won', 'type': 'bids', 'to': 'app.bids' }
  ]

  beforeEach(() => {
    modules = {
      app: {
        namespaced: true,
        getters: {
          getBidsDashBoardData: () => bidsDashBoardData,
          getBids: () => bids
        },
        actions: {
          loadAllFavourites: jest.fn()
        }
      },
      auth: {
        namespaced: true,
        getters: {
          getUser: () => user
        }
      },
      bids: {
        namespaced: true,
        state: {
          keyword: '',
          page: 1
        },
        actions: {
          applyFilter: jest.fn(),
          updateBidsPage: jest.fn()
        }
      }
    }

    store = new Vuex.Store({
      modules
    })

    wrapper = mount(Bids, {
      localVue,
      store,
      mocks: {
        $route
      }
    })
  })

  afterEach(() => {
    wrapper.destroy()
  })

  it('is a Vue instance', async () => {
    let result = {
      'Count': 5852,
      'Pages': 59,
      'Page': 1,
      'Bids': [
        { 'nj_ref': 5943, 'nj_numb': 9350, 'nj_name': 'Tustin Estate Old Kent Road', 'nj_date': '2019-10-10T23:00:00.000Z', 'btype': 'Masterplanning' },
        { 'nj_ref': 5942, 'nj_numb': 9349, 'nj_name': 'Beyond90-AIX', 'nj_date': '2019-09-26T23:00:00.000Z', 'btype': 'Other Projects' },
        { 'nj_ref': 5941, 'nj_numb': 9348, 'nj_name': 'BE Education', 'nj_date': '2019-09-19T23:00:00.000Z', 'btype': 'Secondary Schools' },
        { 'nj_ref': 5940, 'nj_numb': 9347, 'nj_name': 'Trinity College - Reduction in Fossil Fuel Peer Review', 'nj_date': '2019-09-19T23:00:00.000Z', 'btype': 'Universities' },
        { 'nj_ref': 5939, 'nj_numb': 9346, 'nj_name': 'Patchetts - Stroke Rehabilitation Centre', 'nj_date': '2019-09-19T23:00:00.000Z', 'btype': 'Health' }
      ]
    }
    let applyFilter = jest.fn()
    wrapper.setMethods({ applyFilter: applyFilter })
    wrapper.setData({ result: result })
    expect(wrapper.isVueInstance).toBeTruthy()
  })

  it('should render Bids component when loaded', () => {
    expect(wrapper.is(Bids)).toBe(true)
  })
})

运行测试时,会引发以下错误

  

[Vue警告]:创建的挂钩中出现错误(承诺/异步):“ TypeError:无法读取未定义的属性“出价””

从本质上说,applyFilter中的created没有返回。我尝试同时提供模拟功能和/或模拟数据,但测试不断返回该错误。

任何想法为什么会这样?

0 个答案:

没有答案