Как передать реквизит для тестирования компонента? - PullRequest
Новая
       9

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

0 голосов
/ 26 октября 2019

Я изучаю модульное тестирование в Vue и пытаюсь протестировать компонент в соответствии с этой статьей https://alligator.io/vuejs/testing-vue-with-jest/

У меня есть компонент 

<template>
    <div>
        <h1 :style="headingStyles">{{title}}</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                headingStyles: {
                    color: this.color
                }
            };
        },
        props: ["title", "color"]
    };
</script>

и файл с тестовыми примерами 

import Vue from 'vue';
import FancyHeading from '../../src/components/FancyHeading';

function mountComponentWithProps (Component, propsData) {
    console.log('props Data', propsData)
    const Constructor = Vue.extend(Component);
    const vm = new Constructor({
        propsData
    }).$mount();

    return vm.$el;
}

describe('FancyHeading.vue', () => {
    it('should be the correct color', () => {
        const headingData = mountComponentWithProps(FancyHeading, { color: 'blue' });
        const styleData = headingData.style.getPropertyValue('color');
        console.log(styleData)
        expect(styleData).toEqual('blue');
    });

    it('should have the correct title', () => {
        const headingData = mountComponentWithProps(FancyHeading, { title: 'Hello, Vue!' });
        const titleData = headingData.textContent;

        expect(titleData).toEqual('Hello, Vue!');
    });
});

Когда я запускаю yarn test:unit Я получаю сообщение об ошибке 

FancyHeading.vue › should be the correct color

    expect(received).toEqual(expected) // deep equality

    Expected: "blue"
    Received: ""

Похоже, цвет пустой строки, но я не понимаю, почему. Может кто-нибудь объяснить мне и помочь пройти тест?

...