Nuxt•17mo 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.

Nuxt•17mo ago

MagRat_04

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) 
    })

})

Nuxt Test Utils and Web Components

Similar Threads

Nuxt Test Utils and Web Components

Similar Threads

Similar Threads

Similar Threads