如何从.vue组件的HTML

我想创建使用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

我做了一些初步的尝试，但现在它的工作原理是：

你可以从mount使用@vue/test-utils功能

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 --->")
  })
})

如何从.vue组件的HTML

我想创建使用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

我做了一些初步的尝试，但现在它的工作原理是：

你可以从mount使用@vue/test-utils功能

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 --->")
  })
})