Migrating to @stencil/vitest leads to all tests failing with TypeError: Prop is not a function

[kleinfreund]

Hello,

I'm trying to migrate a Stencil project that currently uses stencil test --spec (with Jest 29) to use stencil-test --prod --project spec (with @stencil/vitest). The tests are currently working; however, once I migrate, every single test fails with TypeError: Prop is not a function (Prop just happens to be the "earliest" decorator in the file; any other Stencil decorator moved before it fails as well).

• using: @stencil/vitest@1.13.2 and vitest@4.1.9

• test command: stencil-test --prod --project spec

• got buildDist: true in stencil.config.ts

• got jsc: 'react', jsxFactory: 'h', jsxFragmentFactory: 'Fragment' in tsconfig.json compiler options

• the spec project config in vitest.config.ts (otherwise only references the stencil config)

  {
    test: {
      name: 'spec',
      include: ['src/**/*.spec.{ts,tsx}'],
      environment: 'stencil',
      setupFiles: ['./vitest.setup.ts'],
    },
  },

• vitest.setup.ts: await import('./dist/components/index.js'); export {};

• example component being tested:

  import { Component, h, Prop } from '@stencil/core';
  
  @Component({
    tag: 'my-component',
    styleUrl: 'my-component.scss',
    shadow: true,
  })
  export class DpaIdUsericon {
    @Prop() size: number = 24;
  
    render() {
      return (<p>Hi</p>);
    }
  }

• test:

  import { render, h, describe, test, expect } from '@stencil/vitest';
  
  import './my-component.js';
  
  describe('my-component', () => {
    test('renders', async () => {
      const { root } = await render(<my-component></my-component>);
  
      await expect(root).toEqualHtml(`
        <my-component><p>Hi</p></my-component>
      `);
    });
  });

The decorators no longer working seems like such a basic issue for which I couldn't find a corresponding GitHub issue that I must be doing fundamentally wrong, but at the same time: it worked before and it's only with this migration attempt, that the decorators start to fail.

[johnjenkins]

hey @kleinfreund - sorry to hear you're having issues. From your snippets I can't see anything obvious. (*edit - yes I can, see next comment :) )

If I had to guess, it sounds like vitest is trying to process some of your stencil component code?

Here's a codesandbox (or the corresponding gh repo) where tests seem to be running ok - see if you can see anything obvious. If you find anything make a branch and I'll take a look

[johnjenkins]

ohhh @kleinfreund I see the issue and sorry for the confusion ...

this snippet:

import { render, h, describe, test, expect } from '@stencil/vitest';

import './my-component.js';

describe('my-component', () => {
  test('renders', async () => {
    const { root } = await render(<my-component></my-component>);

    await expect(root).toEqualHtml(`
      <my-component><p>Hi</p></my-component>
    `);
  });
});

Stencil/vitest offers 2 different ways of component testing:

1. via your built, distribution bundles (more accurate)
2. via a plugin, transpiled on-the-fly (less accurate, but better for coverage etc)

When you do import './my-component.js'; you're telling vitest to process your component code (which it will require the plugin to do) but you have setup your test project using your built bundles. So, either remove import './my-component.js'; or setup the tests to use the plugin :)

[kleinfreund]

Indeed, that's what was happening. I think what happened is that initially the tests were all just timing out and through some googling, I ended up trying to consume the built files and mixed things up like this.

I now removed the import statements from the tests and corrected the vitest setup statement to point to the file that's there when running stencil-test --project spec (note, no --prod) and now tests are running.

They didn't pass directly as the rendered attribute order was different and also no style attributes were rendering anymore but that's another problem