[SalesForce] Help needed: Writing a Jest Test for an LWC with a slot

I have a Lightning Web Component that represents a "wizard" and assists in animating the transitions between views. It has a <slot> tag which allows users to define whatever views they want by creating a series of <div> tags.

myWizard.html-------------------------------------------

<template>
    <slot class="wizard-view-container"></slot>
</template>


Sample usage of myWizard component ----------------------------

<c-my-wizard>
    <div data-view-id="first-view"> ... </div>
    <div data-view-id="second-view"> ... </div>
    <div data-view-id="first-view"> ... </div>
</c-my-wizard>

I want to write some Jest Test scripts for this component, but I can't seem to programmatically add children to the body slot

import { createElement } from 'lwc';
import MyWizard from 'c/MyWizard';

describe('myWizard', () => {
    afterEach(() => {
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });

    it('sets the first view to have class curr-view by default and all other views to have next-view', () => {
        let testElement = createElement('c-my-wizard', { is: MyWizard });

        let divElement1 = document.createElement('div');
        let divElement2 = document.createElement('div');
        let divElement3 = document.createElement('div');

        testElement.appendChild(divElement1);
        testElement.appendChild(divElement2);
        testElement.appendChild(divElement3);

        document.body.appendChild(testElement);

        expect(divElement1.classList.contains('curr-view')).toBeTruthy();
        expect(divElement2.classList.contains('next-view')).toBeTruthy();
        expect(divElement3.classList.contains('next-view')).toBeTruthy();
    });
});

When I run this test, I get errors let the following

[LWC error]: appendChild is disallowed in Element unless lwc:dom="manual" directive is used in the template.

I tried putting lwc:dom="manual" to the <slot> tag, but that is not allowed. I can't seem to figure out where to go from here. Is testing for this type of component possible?

Best Answer

I don't know much about Jest but I can spot a potential problem.

You're creating a test element (let testElement = createElement('c-my-wizard', { is: MyWizard });) and later attempting to modify its DOM.

LWC only lets you manipulate an element's DOM if you decorate it with a lwc:dom="manual" in it's definition. The error gives you that hint.

The component you created gets rendered as <c-my-wizard></c-my-wizard> but it should get rendered as <c-my-wizard lwc:dom="manual"></c-my-wizard>

My lack of knowledge in Jest will preclude me from fixing your syntax, but if you can add that directive you'll be good to go

Related Topic