Jest 快照未在 Vue.js Nuxt 中创建快照答案

【问题标题】：Jest snapshot not creating snapshot in Vue.js NuxtJest 快照未在 Vue.js Nuxt 中创建快照
【发布时间】：2020-03-01 16:42:00
【问题描述】：

我正在尝试将快照与我新安装的 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,
};

我不确定为什么？

【问题讨论】：

标签： javascript vue.js testing jestjs nuxt.js

【解决方案1】：

刚刚遇到同样的问题。

发现将期望更改为：

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

似乎有效。

【讨论】：