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