How to test a mitosis component ?

[jeco123]

I am interested in helping provide a feature!

Yes

Which generators are impacted?

• [X] All
• [ ] Angular
• [ ] HTML
• [ ] Qwik
• [ ] React
• [ ] React-Native
• [ ] Solid
• [ ] Stencil
• [ ] Svelte
• [ ] Vue
• [ ] Web components

What problem does this feature solve?

I would like to develop my components using the TDD approach. It is necessary for me to have a test environement that can interpret a "mitosis component" in order to implement a test first and implement the code at a second time.

What does the proposed API look like?

I like the Stencil approach with their test environment.

Could be great to develop this kind of stuff.

Additional Information

No response

[samijaber]

Right now, the most useful way to test a mitosis component is to:

• pick one of the generated outputs (e.g. Qwik)
• import it into a webapp (e.g. a Qwikcity app)
• run integration tests on that (e.g. using playwright)

At Builder, we have a playwright integration tests suite that runs in parallel against multiple servers, each importing a different Mitosis output.

[WesselSmit]

@samijaber I guess it's not possible to use something like Storybook React as JSX lite won't be supported / cause problems?

Currently I am testing it with webapps for React/Vue/Angular as those are the outputs we want to support. Having to set up our own test apps + build/watch scripts for HMR is fine as long as it's to verify the output and testing framework specific implementations. But having it as a debug/test while still developing the mitosis component (my-component.lite.tsx) is tedious as:

1. ideally you'd want to verify your source code works, because after it has been compiled, it becomes harder to trace the root of the problem (my source code or the mitosis compiler).
2. debug info such as console statements are removed in the compiler (with no way to preserve them as far as I know). So the only way to log some state is to add console statements yourself in the compiled code.
3. no HMR, you can try to recreate it using a watcher and compiling/building again, but this is slow in larger code bases and causes all console statements to be removed again.

Having something like storybook for mitosis would solve most of these issues and provide a better DX.

[samijaber]

having something like storybook for mitosis

That is technically impossible because Mitosis is not a rendering framework or a runtime. The Mitosis JSX syntax is merely a parser from JSX to JSON. There is no "Mitosis component" to render.

The only way to test Mitosis content is to render it using one an actual web framework. You are already doing that.

debug info such as console statements are removed in the compiler

You can try the onInit hook to do some debugging. it's not perfect, and not all outputs support it, but it's one solution: https://mitosis.builder.io/playground/?code=JYWwDg9gTgLgBAbzhAdgSRceBfOAzKCEOAIgAEAjAV2ABsATAUygDpgIB6ELCAZ2F4kA3ACgRjAB6RYcJngCGVWvDxUUAYxjsUcALIBPAMJFIKRihgAKMITC8AlIjFxk6TFcuOAvAD4nLl3VUXghaRhZaCABzSwByAAtGWki4AHdoBlj7ERdsbJy4KEYYKigdSwKXAB56YAA3HwAJJMiqjlqGgvtRbCA

I typically add hooks like onUpdate to add logs if I need to.

I will close this issue as there is nothing actionable that can be done about it at this point.