In Cypress I am changing the viewport of my Veu3 app after I preform any other test and it gives the error: "(uncaught execption) TypeError a.value is null".
The minimum app that produces the error:
<script setup>
import { ref, onMounted } from 'vue'
const a = ref(null)
onMounted (() => {
function onWindowResize() {
window.addEventListener("resize", () => {
//a.value always needs to refresh when the window resizes to different content
a.value.textContent = 'Text displayed here will be decided on the window size'
})
}
onWindowResize()
})
</script>
<template>
<div>
<span ref="a" data-testid="test1">M</span>
<a> ..more</a>
</div>
</template>
With the following test. The interesting thing to note here is that if you don't include the first test the Error is not there.
import Test from '../Test.vue'
describe('run 2 test', () => {
it('The error only appears if I run a test before I run the viewport change', () => {
cy.mount(Test)
cy.get('[data-testid="test1"]').get('a').should('contain', ' ..more')
})
it('The error originates on the first viewport changes it appears', () => {
cy.mount(Test)
//so it appears here
cy.viewport(550, 750)
let charCount = 0
cy.get('[data-testid="test1"]').then(($span) => {
charCount = String($span.text()).length;
})
cy.viewport(400, 400)
cy.get('[data-testid="test1"]').then(($span) => {
const newCharCount = String($span.text()).length;
expect(newCharCount).to.be.eq(charCount)
})
})
})
I found this anwser to the question: "Vue3 TypeError ref.value is null" and tried adding defineExpose()
yet it doesn't change a thing. I tried re-declaring the const a = ref(null)
within the onMounted()
also no luck. Been searching but can't find a solution any help would be appreciated since a lot of the test will revolve around viewport changes.
The error causes the rest of the application, which depends on the a.value to fail.
from Viewport change of Vue3 app in Cypress gives TypeError ref.value is null
No comments:
Post a Comment