@storybook/experimental-addon-test - preview decorators not applying to stories

[elidon555]

Summary

I installed thew new @storybook/experimental-addon-test, it seems pretty nice.

however, im facing an issue where decorators from preview.tsx are not being applied to my story components,
is this intentional?

Additional information

If you want to reproduce it:

Node 18

1- clone my repo
2- install all dependencies
3- npx playwright install --with-deps chromium
4- run npx vitest

test result:

story

// decorator isn't auto applied from preview.tsx
export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByText('test123')).not.toBeNull();
  }
};

// decorator imported manually => however imagine doing this for every component
// not convenient
import {decorators} from "/.storybook/preview";
export const PrimaryWithForcedDecorator = {
  args: {
    primary: true,
    label: 'Button',
  },
  decorators: decorators,
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByText('test123')).not.toBeNull();
  }
};

setup.ts

import { beforeAll } from 'vitest';
import { setProjectAnnotations, Decorator } from '@storybook/react';
import * as projectAnnotations from './preview';

window.global = window as any;

const project = setProjectAnnotations([projectAnnotations ]);
beforeAll(project.beforeAll);

preview.ts

import React, {FunctionComponent} from "react";

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export const decorators = [
  (Story: FunctionComponent) => (
      <div>
        <div>
          test123
        </div>
      <Story/>
      </div>
  ),
]

export default preview;

vitest.workspace.ts

import { defineWorkspace } from 'vitest/config';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';


// More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
export default defineWorkspace([
  'vite.config.ts',
  {
    extends: 'vite.config.ts',
    plugins: [
      // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
      storybookTest(),
    ],
    test: {
      globals: true,
      name: 'storybook',
      browser: {
        enabled: true,
        headless: true,
        name: 'chromium',
        provider: 'playwright',
      },
      // Make sure to adjust this pattern to match your stories files.
      include: ['**.stories.js'],
      setupFiles: ['./.storybook/vitest.setup.ts'],
    },
  },
]);

Create a reproduction

https://github.com/elidon555/taskbox

[elidon555]

Issue found

incorrect

import React, {FunctionComponent} from "react";

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export const decorators = [
  (Story: FunctionComponent) => (
      <div>
        <div>
          test123
        </div>
      <Story/>
      </div>
  ),
]

export default preview;

correct

import React, {FunctionComponent} from "react";

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
  (Story: FunctionComponent) => (
      <div>
        <div>
          test123
        </div>
      <Story/>
      </div>
  ),
 ]
};

export default preview;