Как проверить vue компонент на основе стиля класса и html строки? - PullRequest
Новая
       22

Как проверить vue компонент на основе стиля класса и html строки?

0 голосов
/ 20 марта 2020

Я новичок в Vue. js, теперь я хочу проверить свой vue. js компонент с помощью Jest. js, машинопись, vue -class-component и vue -test-Util. Но я столкнулся с проблемой при монтировании отдельного компонента vue в моем скрипте jest-теста, потому что я использую HTML строку вместо шаблона по умолчанию (. vue).

Я объявил свой модуль html в мой файл .d.ts для преобразования html в строку. 

declare module '*.html' {
    const value: string;
    export default value
}

И я отделил машинопись и HTML

HelloWorld. html

 <div class="hello">
    <h1>JEST UNIT TEST</h1>
    <h2>{{ msg }}</h2>
    <button @click="onClick">click me</button>
  </div>

HelloWorld.ts 

import html from './HelloWorld.html';
@VueComponent({
    template: html
})

export class HelloWorld extends Vue {
    msg = 123;
    onClick () {
      this.msg = 'new message'
    }
}

и в моем main.ts создадим Vue экземпляр 

const appVM = new Vue({
    name: 'app',
    data: {

    },
    components: {
        'hello-world': HelloWorld
    },
    router: router,
    methods: {

    }
});

$(function () {
    appVM.$mount("#app");
});

Теперь я пытаюсь написать свой модульный тест для тестирования компонента. Я не знаю, как смонтировать мой html файловый компонент с помощью jest и vue -test-util. В функции shallowmount показано «Нет перегрузки, совпадающей с этим вызовом», потому что html строка не может быть преобразована в vue компонент. Пожалуйста, помогите мне, спасибо заранее. 

import { shallowMount } from '@vue/test-utils'
import html from '@/components/HelloWorld.html'

describe('HelloWorld', () => {
  const wrapper = shallowMount(HelloWorld);
  it('render msg when passed', () => {
    const msg = '123'
    expect(wrapper.find('h2').text()).toMatch(msg);
  })
  it("update 'msg' correctly",async() => {
      await wrapper.find('button').trigger('click');
      expect(wrapper.find('h2').text())
        .toEqual('new message');
    });
})
...