TypeError: event.composedPath is not a function

[antalasztrik]

Hey there!

Issue

We wanted to use happy-dom with Vitest in our Vue project, but we've run into an issue. When running a test for one of our components, we wanted to test the onClickOutside sensor from VueUse, it gaves us an error.

Test

The test we've tried to run:

describe('canClickOutside property', () => {
        let wrapper: VueWrapper
        let divElement
        beforeEach(() => {
            divElement = document.createElement('div')
            document.body.appendChild(divElement)

            wrapper = mount(Searchbar, {
                attachTo: divElement,
                props: {
                    name: 'Test',
                }
            })
        })

        afterEach(() => {
            wrapper.unmount()
            document.body.removeChild(divElement)
        })

        it('should emit `toggle` when the canClickOutside and the toggled prop is set to true', async () => {
            await wrapper.setProps({ toggled: true, canClickOutside: true })
            divElement.click()
            expect(wrapper.emitted()).toHaveProperty('toggle')
        })
    })
})

Error

And the complete error we got:

 FAIL  test/Searchbar.test.ts > searchbar component > canClickOutside property > should emit `toggle` when the canClickOutside and the toggled prop is set to true
TypeError: event.composedPath is not a function
 ❯ Window.listener file:/Users/x/y/z/node_modules/@vueuse/core/index.mjs:135:32
 ❯ Window.dispatchEvent node_modules/happy-dom/lib/event/EventTarget.js:55:30
 ❯ HTMLDocument.dispatchEvent node_modules/happy-dom/lib/nodes/document/Document.js:689:37
 ❯ HTMLElement.dispatchEvent node_modules/happy-dom/lib/nodes/node/Node.js:352:40
 ❯ HTMLElement.dispatchEvent node_modules/happy-dom/lib/nodes/node/Node.js:352:40
 ❯ HTMLElement.dispatchEvent node_modules/happy-dom/lib/nodes/node/Node.js:352:40
 ❯ HTMLElement.click node_modules/happy-dom/lib/nodes/html-element/HTMLElement.js:244:14
 ❯ test/Searchbar.test.ts:55:14
     53| 		it('should emit `toggle` when the canClickOutside and the toggled pr…
     54| 			await wrapper.setProps({ toggled: true, canClickOutside: true })
     55| 			divElement.click()
       |              ^
     56| 			expect(wrapper.emitted()).toHaveProperty('toggle')
     57| 		})

It seems like the error comes from event.composedPath not being implemented in happy-dom. The same test runs without any problems with jsdom.

So my question would be: do you have any plans on addig this functionality to the project? We'd love to use happy-dom in our tests, but as of now we just can't.

Thank you in advance!

[WonderPanda]

@antalasztrik For what it's worth, I'm going through a similar process right now on a large React project which we've recently converted to vite + vitest. I've found that the vitest test environment can be overriden in individual tests by placing a comment at the top of the file:

/**
 * @vitest-environment jsdom
 */

For right now I'm experimenting with just doing this on the tests that fail and then having the majority of our suites run with happy-dom since the speed improvements seem pretty substantial. Might not work for your team but it seems like a reasonable approach for incremental adoption

[capricorn86]

Thanks for reporting @antalasztrik and @WonderPanda! 🙂

I have added support for Event.composedPath() now. Hopefully it will solve your issue.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v3.2.0

[antalasztrik]

Hey @capricorn86!

Thank you for your work and the wonderful library, it works like a charm!

Also thanks @WonderPanda, it was a great temporary solution as well!