Question

如何使用Jest在父组件上测试以下v-if？

父母：

    <div class="systemIsUp" v-if="systemStatus == true">
      foo
    </div>
    <div class="systemIsDown" v-else>
     bar
    </div>

<script>
export default {
  name: 'File Name',
  data () {
    return {
      systemStatus: null,
    }
  },

</script>

这是我当前的设置，用于测试在更改systemStatus变量的值时这些div是否呈现单元测试：

import { shallowMount } from '@vue/test-utils'
import FileName from 'path'

describe('FileName', () => {
  //Declare wrapper for this scope 
  const wrapper = shallowMount(FileName)
  it('Should display message saying that the system is down if "systemStatus" data variable is false', () => {
    expect(wrapper.html().includes('.systemIsDown')).toBe(false)
    wrapper.setData({ systemStatus: false})
    expect(wrapper.html().includes('.systemIsDown')).toBe(true)
  });
});

我尝试使用 contains 和 toContain 代替 includes ，但仍然无法正常工作，Jest返回以下内容：

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

           expect(wrapper.html().includes('.systemIsDown')).toBe(false)
           wrapper.setData({ systemStatus: false })
           expect(wrapper.html().includes('.systemIsDown')).toBe(true)
                                                            ^

很显然，它根本看不到systemIsDown div，并且不认为它存在，因此为什么第一个期望通过了，但是如何在更新systemStatus变量时让它看到div？谢谢

Answer 1

围绕断言进行更改，以查找特定的CSS选择器，如下所示：

wrapper.setData({ systemStatus: false})
expect(wrapper.find(".systemIsDown")).toBeTruthy()

Answer 2

如果您要检查给定的DOM元素是否已创建，这应该起作用：

expect(wrapper.find(".systemIsDown").exists()).toBe(true) // or false

更多here

用Jest对V-If进行单元测试

2 个答案: