Как сгенерировать HTML из компонента .vue - PullRequest
Новая
       53

Как сгенерировать HTML из компонента .vue

0 голосов
/ 05 февраля 2019

Я хочу создать простой генератор статического сайта, который использует 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

Я сделал несколькопервоначальные попытки, но теперь это работает так: enter image description here

1 Ответ

0 голосов
/ 05 февраля 2019

Вы можете использовать функцию 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 --->")
  })
})
...