Question

我正在尝试在新安装的nuxt应用中使用快照。但是它创建的快照看起来不正确。它说它通过了测试，但是如下所示，它不是组件，而当我更改组件时，它也没有标记。

我的组件：

<template>
  <div>
    <footer class="container">
      <small>{{ notice }}</small>
    </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      notice: 'text here'
    }
  }
}
</script>

我的测试是：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Component from '@/components/home/Component.vue'
import BootstrapVue from 'bootstrap-vue'

const localVue = createLocalVue();
localVue.use(BootstrapVue);

const factory = () => {
  return shallowMount(Component, {
    localVue
  });
};

describe('Component', () => {
  test('renders correctly', () => {
    const wrapper = factory();
    expect(wrapper).toMatchSnapshot()
  })
})

它似乎创建的快照是这样的：

exports[`Component renders correctly 1`] = `
VueWrapper {
  "_emitted": Object {},
  "_emittedByOrder": Array [],
  "isFunctionalComponent": undefined,
};

我不确定为什么吗？

Answer 1

遇到了同样的问题。

发现将期望更改为：

expect(wrapper.html()).toMatchSnapshot()

似乎可以正常工作。

开玩笑的快照未在Vue.js Nuxt中创建快照

1 个答案: