Shadow Dom Testing Library In Preview

import type { Preview } from '@storybook/web-components-vite';

import { within as withinShadow } from 'shadow-dom-testing-library';

const preview: Preview = {
  // 👇 Augment the canvas with the shadow DOM queries
  beforeEach({ canvasElement, canvas }) {
    Object.assign(canvas, { ...withinShadow(canvasElement) });
  },
  // ...
};

// 👇 Extend TypeScript types for safety
export type ShadowQueries = ReturnType<typeof withinShadow>;

// Since [email protected]
declare module 'storybook/internal/csf' {
  interface Canvas extends ShadowQueries {}
}

export default preview;

import { within as withinShadow } from 'shadow-dom-testing-library';

export default {
  // 👇 Augment the canvas with the shadow DOM queries
  beforeEach({ canvasElement, canvas }) {
    Object.assign(canvas, { ...withinShadow(canvasElement) });
  },
  // ...
};

import { definePreview } from '@storybook/web-components-vite';

import { within as withinShadow } from 'shadow-dom-testing-library';

// 👇 Extend TypeScript types for safety
export type ShadowQueries = ReturnType<typeof withinShadow>;

// Since [email protected]
declare module 'storybook/internal/csf' {
  interface Canvas extends ShadowQueries {}
}

export default definePreview({
  // 👇 Augment the canvas with the shadow DOM queries
  beforeEach({ canvasElement, canvas }) {
    Object.assign(canvas, { ...withinShadow(canvasElement) });
  },
  // ...
});

import { definePreview } from '@storybook/web-components-vite';

import { within as withinShadow } from 'shadow-dom-testing-library';

export default definePreview({
  // 👇 Augment the canvas with the shadow DOM queries
  beforeEach({ canvasElement, canvas }) {
    Object.assign(canvas, { ...withinShadow(canvasElement) });
  },
  // ...
});