Question

MyView.vue：

<template>
  <v-container fluid>
    <v-row>
      <v-col v-for="obj in myObjs" :key="obj.ref">
        <MyChild :obj="obj" />
      </v-col>
    </v-row>
  </v-container>
</template>

export default class MyView extends Vue {
  myObjs: MyObj[] = []

  mounted () {
    this.myObjs = await api.getGreatObjs()
    // this.myObjs is like expected
  }
}

MyView.spec.ts：

beforeEach( () => {
  localVue = createLocalVue()
  localVue.use(Vuetify)

  jest.mock('axios')
  jest.spyOn(api, 'getGreatObjs')
    .mockImplementation( () => new Promise((resolve, reject) => {
      resolve([new MyObj({name: 'toto', value: 45}), ...])
    }))
})

it('should render', () => {
  wrapper = mount(MyView, {
    stubs: ['router-link']
  })
  expect(wrapper.findAll(MyChild).length).toBe(2)
})

wrapper.html（）的内容：

<v-container fluid=\"\"><v-container fluid=\"\"><v-row></v-row></v-container></v-container>

我也尝试过（MyView.spec.ts）：

describe('P1RealTime.vue', () => {
  let wrapper: any
  let localVue: any

  beforeEach( () => {
    localVue = createLocalVue()
    localVue.use(Vuetify)
  })

  it('should render', () => {
    wrapper = mount(MyView, {
      localVue: localVue,
      stubs: ['router-link']
    })
    expect(wrapper.html()).toEqual('')
  })
})

控制台结果：

Expected: ""
Received: "<div class=\"container container--fluid\"><div class=\"container container--fluid\"><div></div></div>"

“行”（<v-row></v-row>）或“ div”（<div></div>）内没有任何内容，但应该有多个MyChild；所以，我不明白。你能帮我吗？

Vue JS Jest：mount（）无法正确呈现

0 个答案: