Nuxt•3mo ago

Nuxt Test Utils and Web Components

Using Nuxt Test Utils and I want to see if I can test that the web component I am using is hydrating. Custom web component

<comments id="comments">Failed to load comments.</comments>

<comments id="comments">Failed to load comments.</comments>

Test Script I am able to test for the presence of the component but really want to be able to verify the component is hydrating and not displaying the 'Failed to load comments.' fallback message.

describe('Discussions page', async () => {
    const wrapper = mount(Discussions)

    test('comments component loads', () => {
        const comments = wrapper.find('#comments')
        expect(comments.exists()).toBe(true);
    })

    test('Login button is visible', () => {
        const comments = wrapper.find('#comments')
        expect(comments.html({raw: true}).includes('Failed to load comments...')).toBe(true) 
    })

})

describe('Discussions page', async () => {
    const wrapper = mount(Discussions)

    test('comments component loads', () => {
        const comments = wrapper.find('#comments')
        expect(comments.exists()).toBe(true);
    })

    test('Login button is visible', () => {
        const comments = wrapper.find('#comments')
        expect(comments.html({raw: true}).includes('Failed to load comments...')).toBe(true) 
    })

})

Not really finding any examples in searches. I imagine there may be some config that needs to be setup to enable hydration but unclear what I need for this to work. Any guidance or a nudge in the right direction is appreciated.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Nuxt Test Utils and Web Components