I am running a unit test on a web component that has been built with lit. The test is failing when hitting the firstUpdated() function. The issue looks to be related to this.tooltip.hidden and tooltip being undefined.

The code itself is working as expected and is showing/hiding the element, however when running the unit test it is failing to see the tooltip element.

Does anyone have any ideas?

Component code:

@query('.tooltip') 
tooltip: HTMLElement;

firstUpdated() {
  this.tooltip.hidden = !this.open; 
}

Unit test code:

it('should render its children', async () => {
  const content = 'Content'
  const el = await fixture<Tooltip>(html`<qg-tooltip>${content}</qg-tooltip>`)
  expect(el).to.contain.html(content)
});

Error received:

 TypeError: Cannot set properties of undefined (setting 'hidden')
    at Tooltip.firstUpdated (src/components/tooltip/Tooltip.ts:63:17)
    at Tooltip._$AE (../../node_modules/@lit/reactive-element/src/reactive-element.ts:1350:11)
    at Tooltip.performUpdate (../../node_modules/@lit/reactive-element/src/reactive-element.ts:1317:11)
    at Tooltip.scheduleUpdate (../../node_modules/@lit/reactive-element/src/reactive-element.ts:1235:16)
    at Tooltip._$E_ (../../node_modules/@lit/reactive-element/src/reactive-element.ts:1207:24)
    at async elementUpdated (../../node_modules/@open-wc/testing-helpers/src/elementUpdated.js:24:5)
    at async litFixture (../../node_modules/@open-wc/testing-helpers/src/litFixture.js:63:3)