如何从.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 --->")
  })
})