Vue Jest 测试元素的内联样式答案

【问题标题】：Vue Jest testing an element's inline styleVue Jest 测试元素的内联样式
【发布时间】：2020-08-07 02:53:28
【问题描述】：

Vuejs + Jest测试如何获取html元素的style属性？

使用jest 和@vue/test-utils 来测试一个textarea 元素是否在Vuejs 中应用了color 内联样式。

我在 textarea 上设置了ref，并且检查 textarea 存在性及其值的测试成功，但未能从元素的样式中获取 color 属性。

下面是我的组件和测试代码：

<template>
    <Post :post="post">
        <QuestionCard ref="questioncard" :background="post.background">
            <textarea
                ref="posttext"
                :style="{ color: post.color }"
                class="text-center"
                v-model="post.text"
                disabled
            />
        </QuestionCard>
    </Post>
</template>

<script>
import Post from './Includes/Post';
import QuestionCard from '~/components/Posts/Includes/QuestionCard';
import { FeedPost } from '~/classes/FeedPost';

export default {
    name: 'SingleItemPost',
    components: {
        Post,
        QuestionCard,
    },
    props: {
        post: {
            type: FeedPost,
            required: true,
        },
    },
};
</script>

import { Wrapper, shallowMount } from '@vue/test-utils';
import QuestionPost from '../QuestionPost.vue';
import { FeedPost } from '~/classes/FeedPost';

Wrapper.prototype.ref = function (id) {
    return this.find({ ref: id });
};

describe('QuestionPost', () => {
    let wrapper;
    let post;
    const text = 'text';
    const color = 'color';

    beforeEach(() => {
        post = new FeedPost({
            text,
            color,
            type: 'questionPost',
        });
        wrapper = shallowMount(QuestionPost, {
            propsData: {
                post,
            },
        });
    });

    it('should render correct elements', () => {
        expect(wrapper.ref('questioncard').exists()).toBe(true); // OK
        expect(wrapper.ref('posttext').exists()).toBe(true); // OK
    });

    it('should have correct value and style', () => {
        const textarea = wrapper.ref('posttext');
        expect(textarea.element.value).toBe(text); // OK
        expect(textarea.element.style.getPropertyValue('color')).toBe(color); // failed
    });
});

我也试过textarea.element.style.color，但还是一样。

测试结果：

Expected: "color"
Received: ""

那么如何获取textarea元素的color呢？

【问题讨论】：

标签： javascript vue.js jestjs vue-test-utils

【解决方案1】：

这是因为测试设置的颜色值无效（即"color" 不是color 样式的有效值），所以设置被静默拒绝。

要解决此问题，请选择有效的 color 值之一（例如，"red" 或 "#090"）。

【讨论】：