Stencil.js expect(element).toHaveClass('hydrated') ... what does this mean

Question

In the "my-component.e2e.ts" test class created by Stencil.js "npm init stencil" we have a line

expect(element).toHaveClass('hydrated');

I can guess what 'hydrated' means, but I cannot find any documentation for it or why I have to test for it. Can anyone point me to the documentation that explains this or explain it here?

Answer 1

Stencil documentation is not very good and not very detailed. There is no description of 'hydrated' class and what is happening before this class is apply. Anyway, component hydration is not term that Stencil introduced. If you want, you can seach more about it in some modern frameworks context (like react of vue).

However in Stencil 'hydrated' class is added when component is mounted correctly (properties are apply, @Methods are created etc). The defaut test you are reffering to is just a way to test if component builds correctly.