SolidJS component test

[dream2023]

What would you like?

Add the component testing function of solidjs.

Why is this needed?

solidjs is a new frontend framework, and it has a high retention rate and interest. I think more and more people will use it

https://2021.stateofjs.com/en-US/libraries/front-end-frameworks

Other

If you are willing to accept a new framework, I think I can contribute the corresponding code.

[lmiller1990]

Hi, I have had my eye on Solid for a while, let's collaborate.

As we learned from #24250 adding a new library is a bit too involved right now. We are thinking about a better public API so third party contributors don't have to figure out how to wire it all up.

Here's what I think we should do right now:

1. Create the mount function

Do this in a separate repo (eg, under your own GH profile). You can just copy paste from Svelte (it's the simplest one): https://github.com/cypress-io/cypress/blob/develop/npm/svelte/src/mount.ts#L60-L90. You can use the @cypress/mount-utils library from npm to grab some useful helpers.

All this needs to do is mount the component. There is a useful function called getContainerEl() in @cypress/mount-utils to find the root element.

Complete Example

Here's a simple example showing how to make a mount function for Web Components: https://github.com/lmiller1990/cypress-web-components-example. I published the mount function to npm to illustrate how to do it.

We can no doubt do something similar for Solid.

[dream2023]

I finished the work, see cypress-solidjs.

And I wrote some test cases, It works very well.

[dream2023]

Next, I will use some real projects to verify this package.

[lmiller1990]

Nice, looking good so far. I will try it out, too.

In Cypress 11 we are removing the unmount function from React, and just recommending people use the native ReactDOM.unmountNodeAt... API. Is there something simiilar for Solid? Cypress 11 will be out soon - minor changes, but we are trying to standardize the mount API across frameworks.

[dream2023]

Solid not like React, but more like Vue or Svelte. for example:

// solidjs
const dispose = render(() => <App />, document.getElementById('root'));
dispose(); // unmount 

// vue
const app = createApp(App)
app.mount('#app')
app.unmount() // unmount 

@cypress/vue and @cypress/svelte have not been exported to unmount. Do I need to remove unmount ?

[lmiller1990]

Yeah I'd recommend removing unmount for now, until we figure out if we want to have it. If we do, ideally, we'd implement it for all frameworks at once.

Any good open source apps using Solid we could add Cypress to and give it a try against some more complex components?

[dream2023]

Okay, I have removed it.

Here are some good open source apps that we can try:

• https://github.com/nolimits4web/swiper
• https://github.com/TanStack/query/tree/main/packages/solid-query/src
• https://github.com/ag-grid/ag-grid/tree/latest/grid-packages/ag-grid-solid

[cuixiaorui]

I committed a pr for solidjs component test.

see #24587

We can perfect it together haha

[lmiller1990]

So we are looking at a better public API so third parties can plug into Cypress (including the onboarding where it scaffolds everything) but right now we don't have that. I don't expect this public API to land until 2023 - we are working on other features until the end of this year (like run all specs, performance improvements, etc).

In the meantime, I'd recommend publishing to npm and writing some docs on how to set it up and use it, or we can all just collaborate?

I am excited to see Solid support. I tried Solid out and I'm really happy with what I see. It has the things I like about React (TSX) and Vue (mutative reactivity) without the foot guns of Hooks or the need to use a specific file/editor plugin (like Vue) to get a first class TS experience.

[lmiller1990]

Hello, following up on my above comment, I'm working on making Cypress more pluggable so you can easily add support for your favorite framework. I'm tracking my work here: #24991.

[JessicaSachs]

I am excited to see Solid support. I tried Solid out and I'm really happy with what I see. It has the things I like about React (TSX) and Vue (mutative reactivity) without the foot guns of Hooks or the need to use a specific file/editor plugin (like Vue) to get a first class TS experience.

@lmiller1990 lol. Was about to say this. DM me on Discord when you have a recipe and I'll play around with it once it's ready.

[lmiller1990]

Yessir, will do. I think Solid is a good first candidate. I tried it out, I like it, it's like React without the bad bits 💯

[lmiller1990]

Hiya @JessicaSachs @dream2023, we have a public API for this feature coming in the next release.

• Docs (preview): https://cypress-documentation-git-lmiller-ct-public-api-docs-cypress-io.vercel.app/guides/component-testing/third-party-definitions
• Docs PR: CT Public API docs cypress-documentation#5069
• Example implementation (solid.js, copy+pasted mostly from here) https://github.com/lmiller1990/cypress-ct-solid-js
• Template: https://github.com/cypress-io/cypress-ct-definition-template

If either of you is interested, you could either make your own one (we are calling these Framework Definitions) or maintain my Solid.js one.

[dream2023]

Thinks.. I'll give it a try when cypress releases a new version.

[lmiller1990]

Sure, there's a pre-release here if you want to try it aaf91b8#comments

Docs branch: cypress-io/cypress-documentation#5069 (comment)