Vue Jest 测试元素的内联样式

Question

如何在 Vuejs + Jest 测试中获取 html 元素的样式属性？

使用 jest 和 @vue/test-utils 测试文本区域元素是否在 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呢？

Answer 1

发生这种情况是因为测试设置了无效的颜色值（即，"color" 不是 color 样式的有效值），因此设置被静默拒绝。

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

Vue Jest 测试元素的内联样式

Vue Jest testing an element's inline style

javascript

vue.js

jestjs

vue-test-utils