Stencil & React Testing Library

Stencil
1

I feel like I am missing something super basic here but I can’t seem to find documentation on it. We are using a Stencil library in a React App and we are trying to test it using Jest & RTL. However we are having trouble testing some of the stencil elements because they don’t seem to be “hydrating”.

Does anyone have any simple examples we can work off of?

2

Thanks to some help from the #stencil slack, I found out that I needed to register the components.

aka:

defineCustomElements(window);

Then I just waitFor the component to have the hydrated class:

await waitFor(() => {
      expect(filter).toHaveClass('hydrated');
});