时间戳

首页 > 解决方案 > Vue/test-utils shallowMount：无法读取未定义的属性“道具”

javascript - Vue/test-utils shallowMount：无法读取未定义的属性“道具”

问题描述

我有一个模态组件，它需要状态、路由器、道具和语言混合来呈现，这就是道具的样子。

import moment from "moment-timezone"
import { faTimes } from "@fortawesome/pro-solid-svg-icons/faTimes"
import { faExclamation } from "@fortawesome/pro-solid-svg-icons/faExclamation"
import { faChevronRight } from "@fortawesome/pro-solid-svg-icons/faChevronRight"

export default {
  props: {
    data: {
      TournamentTitle: String,
      MatchId: Number,
      RoundNumber: Number,
      TournamentForfeitTime: String,
      GameImageSmallUrl: String,
      ContextualLocation: {
        name: {
          type: String,
          required: true
        },
        params: {
          type: Object,
          required: true
        }
      },
    }
  },

我创建了一个简单的笑话测试只是为了让组件渲染，但是在满足 Vue 语言 mixin 之后，我仍然无法让它进行浅渲染测试。

import { shallowMount, createLocalVue } from '@vue/test-utils'
import { i18nMixin } from "@mogul/locales"
import Vuex from 'vuex'
import moment from "moment-timezone"
import KeyActionTournamentModal from './KeyActionTournamentModal.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 333
  }
})

describe('KeyActionTournamentModal.vue', () => {
  
  it('renders', () => {
    // render the component
    const startTime = moment().add(2, "minutes").add(5, "seconds").format()
    const wrapper = shallowMount(KeyActionTournamentModal, {
      localVue,
      store,
      mixins: [i18nMixin],
      propsData: {
        data: {
          TournamentTitle: "KeyActionTournamentModal Test",
          MatchId: 3333,
          RoundNumber: 1,
          TournamentForfeitTime: startTime,
          GameImageSmallUrl: "test.com/funny-cat-pic.png",
          ContextualLocation: {
            name: "ffa-match",
            params: {
              tournamentId: 9362,
              roundNumber: 1,
              groupNumber: 2
            }
          }
        }  
      }
    })

    // assert the error is rendered
    expect(wrapper.find('.minutesSecondsUntilRound')).toBe("7m 5s")
  })
})

每次我使用 yarn [module] test:unit [filename] 运行测试时，我都会收到这个错误，我不明白，因为我在浅渲染函数中定义了 propsData 属性。

 FAIL  src/components/Modal/KeyActionTournamentModal.spec.js
  KeyActionTournamentModal.vue
    ✕ renders (7ms)

  ● KeyActionTournamentModal.vue › renders

    TypeError: Cannot read property 'props' of undefined

      19 |     // render the component
      20 |     const startTime = moment().add(2, "minutes").add(5, "seconds").format()
    > 21 |     const wrapper = shallowMount(KeyActionTournamentModal, {
         |                     ^
      22 |       localVue,
      23 |       store,
      24 |       mixins: [i18nMixin],

      at normalizeProps (../node_modules/vue/dist/vue.runtime.common.dev.js:1419:23)
      at mergeOptions (../node_modules/vue/dist/vue.runtime.common.dev.js:1521:3)
      at mergeOptions (../node_modules/vue/dist/vue.runtime.common.dev.js:1535:18)
      at Function.Vue.extend (../node_modules/vue/dist/vue.runtime.common.dev.js:5139:19)
      at createInstance (../node_modules/@vue/test-utils/dist/vue-test-utils.js:2662:51)
      at mount (../node_modules/@vue/test-utils/dist/vue-test-utils.js:13851:18)
      at shallowMount (../node_modules/@vue/test-utils/dist/vue-test-utils.js:13881:10)
      at Object.it (src/components/Modal/KeyActionTournamentModal.spec.js:21:21)

标签： javascriptvue.jsjestjs

解决方案

我发现我错误地注入了 i18n Vue 翻译 mixin。当我的组件浅渲染时，它必须在导入失败之前才能到达 propsData，所以我在 props 上得到了误报。

解决方案：我只是模拟了翻译功能，因为我还没有测试这个组件的那部分。

  const wrapper = shallowMount(KeyActionTournamentModal, {
  localVue,
  store,
  propsData: {
    data: {
      TournamentTitle: "KeyActionTournamentModal Test",
      MatchId: 3333,
      RoundNumber: 1,
      TournamentForfeitTime: startTime,
      GameImageSmallUrl: "test.com/funny-cat-pic.png",
      ContextualLocation: {
        name: "ffa-match",
        params: {
          tournamentId: 9362,
          roundNumber: 1,
          groupNumber: 2
        }
      }
    }  
  },
  mocks: {
    $t: (msg) => msg,
    $filters: {
      time: {
        add: () => {},
        countUp: () => "00:07:05"
      }
    }
  }
})

推荐阅读