I’m not sure about the versions of cypress that you’re using or how you run it, but what I did to reproduce your problem was to use vue 3, and cypress 13, and run the test with this command cypress run --component --headed --no-exit --browser chrome. And the error that I found is TypeError: Cannot set properties of null (setting 'textContent').

What happened

Assuming my way of reproducing is correct, I can assure you that the error that you found "TypeError ref.value is null" is actually happening on the first test, not the second test. Want some proof? try to use these codes:

<script setup>
  import { ref, onMounted } from 'vue'
  const a = ref(null)
  const props = defineProps(['testname'])

  onMounted (() => {
    function onWindowResize() {
      window.addEventListener("resize", () => {
        //a.value always needs to refresh when the window resizes to different content
        try {
          a.value.textContent = 'Text displayed here will be decided on the window size'
          console.log(`success changing textContent on ${props.testname}`)
        } catch (e) {
          console.error(e)
          console.log(`error happens on ${props.testname}`)
        }
      })
    }
    onWindowResize()
  })
</script>

<template>
<div>
  <span ref="a" data-testid="test1">M</span>
  <a> ..more</a>
</div>
</template>

describe('run 2 test', () => {
  it('The error only appears if I run a test before I run the viewport change', () => {
    cy.mount(Test, { props: { testname: "test1" } })
    cy.get('[data-testid="test1"]').get('a').should('contain', ' ..more')
  })

  it('The error originates on the first viewport changes it appears', () => {
    cy.mount(Test, { props: { testname: "test2" } })
    //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)
    })
  })
})

If you run with those codes, you’ll see clearly that the error happens on the first test:

Why

So why exactly did that happen? It seems like when the first test finishes, the component doesn’t get unmounted, even after the second test starts to run, want some proof? try to update the script setup to this:

<script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  const a = ref(null)
  const props = defineProps(['testname'])

  function intervalFunction() {
    console.log(`running on ${props.testname}`)
  }
  onMounted (() => {
    setInterval(intervalFunction, 1000);
    function onWindowResize() {
      window.addEventListener("resize", () => {
        //a.value always needs to refresh when the window resizes to different content
        try {
          a.value.textContent = 'Text displayed here will be decided on the window size'
          console.log(`success changing textContent on ${props.testname}`)
        } catch (e) {
          console.error(e)
          console.log(`error happens on ${props.testname}`)
        }
      })
    }
    onWindowResize()
  })

  onBeforeUnmount(() => {
    clearInterval(intervalFunction)
  })
</script>

Now run the test again, and on the console, you’ll see that the interval prints don’t stop even when it should be cleared on the onBeforeUnmount lifecycle hook and after the test is finished.

That would only mean that the component persists and is still affected by the next test. In other words, when this line cy.viewport(550, 750) is executed, it doesn’t just affect the component mounting on the second test, but also the first one. This is just my hunch, but for some reason, the first component isn’t unmounted properly (the component has no more elements after the first test is done, but maybe some of it is still there and cypress somehow still affects it)

So why is it like that? to be honest i’m not sure myself, but i’d say that error is a false alarm for the test, because that error happens when the test (the first one) is already executed, so in my opinion, you can just ignore it. If you feel uncomfortable with the error, you could just wrap the value assignment inside a try catch like what I show above.

Or maybe you can unmount the component by following this guide.

EDIT

Actually, after some tweaking, you simply need to remove the window resize event listener when unmounting:

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
const a = ref(null);

function resizeCallback() {
  //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";
}

onMounted(() => {
  function onWindowResize() {
    window.addEventListener("resize", resizeCallback);
  }
  onWindowResize();
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeCallback);
});
</script>

<template>
  <div>
    <span ref="a" data-testid="test1">M</span>
    <a> ..more</a>
  </div>
</template>