MagRat_04
MagRat_04
PostsComments
NNuxt
Created by MagRat_04 on 10/2/2024 in #❓・help
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.
1 replies