Testing Native JS Components

[azamanaza]

Checked documentation and only provides react and vue.

Is there a way to test custom components? Something like

import { mount } from '../native';
import { MyJsComponent } from '..';

// context
..

before(() => {
  mount('<div data-app></div>').then(el => new MyJsComponent(el));
});

...
// tests

[lmiller1990]

By custom component, do you mean a Web component? Or just some arbitrary JS code?

I made an example showing how you might create your own mount function. You could adapt this for your own use case: https://github.com/cypress-io/cypress-component-examples/tree/main/no-framework. The main code is in mount.js.

We intend to provide more adapters moving forward, for example Svelte, Web Components etc, but in the short term we are primarily focusing on the most popular component frameworks, which are React, Vue and Angular.

[azamanaza]

By custom component, do you mean a Web component? Or just some arbitrary JS code?

No and yes.

We intend to provide more adapters moving forward, for example Svelte, Web Components etc, but in the short term we are primarily focusing on the most popular component frameworks, which are React, Vue and Angular.

The efforts are much appreciated, but it would also be great if a base adapter existed meant for native JS.

Thanks for the direction, it's what I'm looking for at the very least.

[lmiller1990]

I'm not sure what a base adapter would look like. Are you suggesting an adapter that simply takes a HTMLElement as the first argument?

If that's the case, it'd be fairly easy to take what I shared and make a package. So simple, in fact, I'm not sure it'd make sense to maintain as an official integration - likely users will want to extend it to have custom arguments and change it for their own project/use case.

[austinkruisheer]

@lmiller1990 this has been pretty helpful for me. Any tips on taking that example and modifying it to mount a .tsx web element instead of a .js? Based on the searching I have done, the resources I have found have always used a react framework when working with typescript but my project is no-framework with typescript web components.

[lmiller1990]

Can you share how you are bundling your tsx web component? I've not seen this before. @austinkruisheer

[austinkruisheer]

@lmiller1990 we are using vite and this is all within the knapsack design system tool. Knapsack takes these web components and does something in the backend to then allow the user to configure them within their tool. In the time since I posted I stumbled upon one of their support docs that makes it seem like they are aware of the difficulties trying to integrate with automation and have a workaround to effectively mount the components through their own tool https://help.knapsack.cloud/article/112-automated-testing-prerequisites