How can I effectively test the v-if condition in my parent component using Jest?
Parent Component:
<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>
Below is my current unit test setup to check if the divs render correctly when the value of the systemStatus variable changes:
import { shallowMount } from '@vue/test-utils'
import FileName from 'path'
describe('FileName', () => {
//Declare wrapper for this scope
const wrapper = shallowMount(FileName)
it('Should display a message indicating that the system is down when "systemStatus" data variable is false', () => {
expect(wrapper.html().includes('.systemIsDown')).toBe(false)
wrapper.setData({ systemStatus: false})
expect(wrapper.html().includes('.systemIsDown')).toBe(true)
});
});
I have attempted to use contains and toContain instead of includes, but still unable to achieve the desired outcome. Jest response includes the following error:
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)
^
It seems that the systemIsDown div is not being detected at all, leading to the failure of the first expectation. How can I make sure that the div is recognized when the systemStatus variable is updated? Thank you.