CODEWITHSUNDEEP
javascriptvue.jsjestjs
Paul
Paul

Reputation: 53

Vue/test-utils shallowMount: Cannot read property 'props' of undefined

I have a modal component that requires state, router, props, and a language mixin to render, this is what the props look like.

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
        }
      },
    }
  },

I created a simple jest test just to get the component to render but after satisfying the Vue language mixin I still cannot get it to shallow render to test.

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")
  })
})

Every time I run the test using yarn [module] test:unit [filename] I get this error, which I don't understand because I defined the propsData property in the shallow render function.

 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)

Upvotes: 2

Views: 3697

Answers (1)

Paul
Paul

Reputation: 53

I found that I was injecting the i18n Vue translation mixin incorrectly. When my component shallow rendered it must have failed at that import before it could get to propsData so I was getting a false positive on props.

SOLUTION: I just mocked the translation function as I am not testing that part of this component quite yet.

  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"
      }
    }
  }
})

Upvotes: 1

Related Questions