如何从 .vue 组件生成 HTML

Question

我想创建使用 VueJS 的简单静态站点生成器。

我有简单的 vue 组件：

<template>
  <div>
    <v-child
      v-for="child in children"
      :title="'Child ' + child.id"
      :key="child.id"
    >
      {{ child.name }}
    </v-child>
  </div>
</template>

<script>
import children from './children';

export default {
  data () {
    return {
      children
    };
  }
}
</script>

并希望实现从中生成 HTML 的功能：

describe('generateHTML', () => {
  it('generates HTML from vue component', async () => {
    expect(await generateHTML(__dirname + '/fixtures/v-parent.vue'))
      .to.equal('<div><div class="child"><div>Child 1</div><div>First</div></div><div class="child"><div>Child 2</div><div>Second</div></div></div>')
  });
});

你有什么想法/提示我该怎么做？

这里是重现我的问题的回购： lusarz/vue-questions

只要运行：

npm install
npm run test

我做了一些初步尝试，但现在它的工作方式如下：

Answer 1

你可以使用@vue/test-utils中的mount函数

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo Component', () => {
  it('check rendered component html', () => {
    const wrapper = mount(Foo)
    expect(wrapper.html()).toBe("<--- Your Html --->")
  })
})