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

如何使用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>

我尝试使用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，也不认为它存在，因此为什么第一个expect会通过，但是当systemStatus变量更新时，如何让它看到div？

---

感谢

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

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

---

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

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

---

如果您想检查给定的DOM元素是否已创建（或未创建），这应该是可行的：

expect（wrapper.find（“.systemIsDown”）.exists（））.toBe（true）//或false

---

更多

如果您想检查给定的DOM元素是否已创建（或未创建），这应该可以工作：

expect（wrapper.find（“.systemIsDown”）.exists（））.toBe（true）//或false

---

更多

.html（）.includes（text）

不会将

文本

视为选择器，它只是在字符串中搜索。看看

wrapper.html（）

实际上给了你什么。我知道wrapper.html（）将返回html输入的字符串版本，但是如果使用wrapper.html（）时div被删除，我仍然无法取出。toContain（'.systemIsDown'），因为我得到了以下内容：预期的子字符串：“.systemIsDown”收到的字符串：“例如，v-elsean和

'bar.includes（'.systemIsDown'）

下的完整内容为false，因为它不是CSS选择器。它只是在寻找字面上的子字符串。如果要使用基于HTML的断言，请不要将其展平为字符串。好的，我更改了断言，现在是：

let division=wrapper.HTML（）

expect（division.includes（“systemIsDown”））。toBe（true）

发现div很好，但当我检查相反版本（systemIsUp）时，我的

wrapper.setData({systemStatus:true}）

没有更改数据变量，断言之间是否存在数据泄漏？

.html（）.includes（text）

不会将

text

视为选择器，它只是在字符串中搜索。看看

wrapper.html（）

实际上提供了什么。我知道wrapper.html（）将返回HTML输入的字符串版本，但是在使用wrapper.HTML（）时，如果div为空，我仍然无法拉出。toContain（'.systemIsDown'），因为我得到以下内容：预期的子字符串：“.systemIsDown”收到的字符串：”，即v-elsean和

'bar.下的完整内容。包括（'.systemIsDown'））

为false，因为它不是CSS选择器。它只是查找文字子字符串。如果要使用基于HTML的断言，请不要将其展平为字符串。好的，我更改了断言，现在是：

let division=wrapper.HTML（）

expect（division.includes（“systemIsDown”）。toBe（true）

发现div很好，但是当我检查相反版本（systemIsUp）时，我的

wrapper.setData（{systemStatus:true}）

没有更改数据变量，断言之间是否存在数据泄漏？