In Cypress component tests, changes to window object made inside component render cycle do not persevere

Question

I need to expose some of my component's internals to Cypress component tests via window object, but I'm failing to pass and read it properly. Consider this code:

// component
import React, { FC } from 'react'

(window as any).publicDictionary = { }
export const getPublicDict = () => (window as any).publicDictionary
const addToPublicDict = (id: string) => (window as any).publicDictionary[id] = true

addToPublicDict('foo')

export const MyComponent: FC = () => {
   addToPublicDict('bar')
   return null
}

// test
it('Applies default value', () => {
   mount(<MyComponent/>)

   const dict = getPublicDict();

   cy.log({
      window,
      dict,
      foo: dict.foo,
      bar: dict.bar,
      dictKeys: Object.keys(dict),
   } as any)
})

This code behaves very weirdly when inspected via Chrome devtools:

... when logging publicDict directly, both foo and bar properties seem to be present - but when I try to access them, bar turns out to be undefined, because it was set inside the component's render cycle. foo, on the other hand, can be read and accessed as expected.

What is going on? What can I do to successfully pass my component's internals to Cypress in component tests?

TesterDick · Answer 1 · 2022-05-20T12:23:58.020

3

You're exporting export const getPublicDict... so import it like this

import {getPublicDict} from '../src/my-component'

With this import, the properties show up.

Note, the window object isn't the same in test and app. In component testing they mount the component on the test runner window.

edited May 20 '22 at 12:23

answered May 20 '22 at 12:16

TesterDick

3,830
5
18

You are wrong. I obviously do import the function - how else did you think I manage to call it with `dict` and `dict.foo` being accessible in the return value? – Michal Kurz May 20 '22 at 16:43
1

Yes it works, I just tried it. Obviously you are importing in the wrong way. – SuchAnIgnorantThingToDo-UKR May 20 '22 at 20:36

score 1 · Accepted Answer · answered May 23 '22 at 14:39

I haven't found the cause, but I found the solution.

window object only works properly for me, when I access it while chained after cy.window command:

import { getPublicDict } from './utils'

// This works:
it('works', () => {
  cy.window().then(() => {
    // Here, window and its properties work as expected
    const dict = getPublicDict();  
  })
})

// This doesn't:
it('works', () => {
  // Here, window tends to get quite quirky
  const dict = getPublicDict(); 
})

This way it works well - I don't even have to use the window object yielded by cy.window - it's sufficient I access window while chained after cy.window.

If anyone knows why this is, I'm curious.

In Cypress component tests, changes to window object made inside component render cycle do not persevere

2 Answers2