Here is my file which have button to read more and this button sets focus on element
Component
...
handleFocusOnText = (): void => {
setTimeout(() => this.hiddenTextRef?.focus(), 500)
}
...
rednder()
...
<span ref={(el) => (this.hiddenTextRef = el)} tabIndex={-1} innerHTML={hiddenContent} />
<button
data-qa="readmore-expander-button"
onClick={this.handleClick}
>
{this.isOpen ? this.labelLess : this.labelMore}
</button>
handleClick method is also calling handleFocusOnText.
Problem is that i call click on this button in my test file and its throwing TS error that focus from handleFocusOnText is not a function. Can you help me out of this issue?
Test.spec.ts
....
// Click "read more" button
page.doc.querySelector('button').click()
await page.waitForChanges()
const spanEl = document.querySelector('[data-qa="test-span"]')
expect(spanEl).not.toBeNull()
I wonder this is not getting right context - how about changing
onClick={this.handleClick}
to
onClick={() => this.handleClick()}
would that work?