Testing children passed to slot

[angelsalazar-zz]

Summary
I wonder if this issue can be considered as a bug, but since I did not find a solution on the lwc docs I think it is.
is it possible to tests components that receives children using an slot element?
I have build a wizard component that I am not able to test because there is no way to pass the components as children.

Steps To Reproduce:

• create a component that receives children using slot
• when testing it, try adding children using appendChild (I know this is not possible because it requires the lwc:dom="manual" directive, but my wizard does not expect to receive children programmatically but declaratively)

Expected result
there should be way to test components that receive children using slot or a way to set
the lwc:dom="manual" programatically.

Actual result
there is no way to test the case described above.

Additional information
My workaround to this issue was to create a test demo component that renders the wizard and its wizard steps, but I feel lwc library should provide a way to test this scenario.

[trevor-bliss]

Hi @angelsalazar. This is still currently a gap when testing your components. Hopefully when salesforce/lwc#1322 is released it will be possible to call appendChild to test slots.

Unfortunately, it will be a bit before that change makes it a production release and possible here. I'll leave this issue open so we can verify once the PR into LWC is merged.

Until then your workaround of creating an additional test component is probably the best option.

[lranches-sfdo]

@trevor-bliss Is there any update to to support testing children passed to slots?

[leslchan]

Checking if there's any update to testing a component that uses slots?

[ghingis]

@trevor-bliss it seems the PR you mentioned is merged, is there any chance this will be solved any time soon?

[peterksfdc]

Any update on this issue and resolution or potential workaround?
Container kind LWC components (TabSet, Accordion, Field Section) all have children in slots and cannot test them currently.

[pmdartus]

FYI @leobalter

[joeythomaschaske]

You can do this through mocking. Here's an example of doing it with the the standard lightning-modal components

https://salesforce.stackexchange.com/questions/388022/how-can-i-test-that-my-component-which-implements-the-standard-modal-components/389583#389583

[HBouch]

Any update on this issue Team ?

We have our own implementation of lightningModal, which in itself is an LWC, this component in called in the component we are writing tests to.
the mock works but I see no way to access header, body and footer content in order to validate displayed elements in the body.

Any input is highly appreciated, and many thanks for the great work :)

[nolanlawson]

If you are using native shadow DOM then you can use appendChild to test slotted children. This works the same as any standard web component.