Vue-unit-test with Jest：如何测试组件中是否有特定图像

Question

我正在使用 vue-test-utils 和 Jest 进行单元测试。我正在测试的组件有几张图片，但一张比其他的更重要，我想测试一下，看看它是否存在。

我查看了文档 [https://vue-test-utils.vuejs.org/guides/#getting-started] 和 [https://vue-test-utils.vuejs.org/api/wrapper/get.html]

这是我的代码。

带图片的组件：

<template>
   <img :scr="require('./images/image1.png')" class="image1"/>
   <!-- other code below -  not testing in this case -->
</template>

我的测试：

import component from '@/src/stuff/component';
import { mount } from 'vue-test-utils';

describe('component', () => {

const wrapper = mount(component);

test('Is there an image in the component', () => {
const img = wrapper.find('.image1'))
expect(img.is('.image1')).toBe(true)
expect(wrapper.get('image1'))

});

我的错误是："wrapper.get" 不是函数。

我想获得一些帮助来正确测试我的组件中是否有图像，以及如何在单元测试中使用 get() 断言。

Answer 1

我使用的使我的测试成功的代码是：

test("Check that the specific image exists", () => {
const img = wrapper.findAll('.image1'));
expect(img.length).toBe(1);
});

Vue-unit-test with Jest：如何测试组件中是否有特定图像

Vue-unit-test with Jest: How to test if there is one specific image in the component

vue.js

jestjs

vue-test-utils