index.ts

export { ZandersComponent } from './ZandersComponent'

styles.module.css

.ZandersComponentWrapper {

}

ZandersComponent.md

ZandersComponent

Usage

export { ZandersComponent } from './ZandersComponent'

<ZandersComponent>Some content</ZandersComponent>

ZandersComponent.stories.tsx

import { Meta, StoryObj } from "@storybook/react";
import { expect, within, screen } from "@storybook/test";
import { ZandersComponent } from "../ZandersComponent";

/**
 * Info
 * - https://storybook.js.org/docs/writing-stories/play-function#writing-stories-with-the-play-function
 */

const meta: Meta<typeof ZandersComponent> = {
  title: "2. Components/ZandersComponent",
  component: ZandersComponent,
  parameters: {
    actions: { argTypesRegex: "^trigger.*" },
    // layout: "centered",
  },
  args: {},
};

export default meta;

type Story = StoryObj<typeof ZandersComponent>;

export const Default: Story = {
  args: {
    children: "Some content",
  },
  async play({ canvasElement }) {
    // const canvas = within(canvasElement);
    expect(screen.getByText("Some content")).toBeInTheDocument();
  },
};

export const AnotherStory: Story = {
  args: {
    children: "Some more content",
  },
  async play({ canvasElement }) {
    // const canvas = within(canvasElement);
    expect(screen.getByText("Some more content")).toBeInTheDocument();
  },
};

ZandersComponent.test.tsx

import { describe, expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
// import userEvent from "@testing-library/user-event";
import { composeStories } from "@storybook/testing-react";

import * as ZandersComponentStories from "../__stories__/ZandersComponent.stories";

const { Default } = composeStories(ZandersComponentStories);

describe("ZandersComponent", () => {
  test("renders the ZandersComponent component", async () => {
    const { container } = render(<Default>Some content</Default>);

    // @ts-expect-error we're using incompatible version of testing-react and
    // Storybook which will be resolved when we update to React 18
    await Default.play({ canvasElement: container });
    expect(screen.getByText("Some content")).toBeInTheDocument();
  });
});

ZandersComponent.tsx

import { type ComponentPropsWithoutRef } from "react";
import styles from './styles.module.css'

export type ZandersComponentProps = {} & ComponentPropsWithoutRef<"div">;

export const ZandersComponent = ({ children, ...rest }: ZandersComponentProps) => {
  return (
    <div
      {...rest}
      className={styles.ZandersComponentWrapper}
      data-testid="ZandersComponent"
    >
      {children}
    </div>
  );
};