tidusia

play: async ({ canvasElement, args }) => {
  const canvas = within(canvasElement);
  const user = userEvent.setup({ delay: 50 });
  await user.click(canvas.getByText("Click me"));
  await waitFor(() => expect(args.onClick).toHaveBeenCalledTimes(1));
},

tidusia

import { Meta, StoryObj } from "@storybook/react";
import Button from ".";
import { userEvent, within, waitFor } from "@storybook/testing-library";
import { expect } from "@storybook/jest";

export default {
  component: Button,
  argTypes: {
    onClick: { action: true },
  },

tidusia

import React from "react";
import clsx from "clsx";

type Props = {
  className?: string;
};

export default function MyComponent({ className }: Props): React.ReactElement {
  return <div className={clsx(className, "w-full")}>Content !</div>;
}

tidusia

import { ComponentMeta } from "@storybook/react";
import COMPONENT_NAME from ".";
import { userEvent, within } from "@storybook/testing-library";

export default {
  component: COMPONENT_NAME,
  decorators: [(story) => <div>{story()}</div>],
  parameters: {
    layout: "centered",
  },

tidusia

import React, { FunctionComponent } from "react";

const Menu: FunctionComponent<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg stroke="currentColor" fill="none" viewBox="0 0 24 24" {...props}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M4 6h16M4 12h16M4 18h16"
    />

tidusia

# Global docker ignore
**/.dockerignore
docker-compose.yml
Dockerfile*
*.dockerfile
.git/

# Nodejs app ignore
node_modules/

tidusia

test("should play the story interaction", async () => {
  const onClick = jest.fn();
  const { container } = render(<Default onClick={onClick} />);
  await Default.play({ canvasElement: container });
  expect(onClick).toHaveBeenCalledTimes(1);
});

tidusia

// Flexible Compound Components - epicreact.dev

import * as React from 'react'
import {Switch} from '../switch'

// 📜 https://reactjs.org/docs/context.html#reactcreatecontext
const ToggleContext = React.createContext()
ToggleContext.displayName = 'ToggleContext'

function Toggle({children}) {

tidusia

import React from "react";
import * as stories from "./index.stories";
import { axe } from "jest-axe";
import userEvent from "@testing-library/user-event";
import { composeStories } from "@storybook/testing-react";
import { render, screen } from "@testing-library/react";

const { Default } = composeStories(stories);

describe("MyComponent", () => {

tidusia

import React from "react";
import { Meta, Story } from "@storybook/react";
import MyComponent, { MyComponentProps } from ".";

export default {
  title: "MyComponent",
  component: MyComponent,
  decorators: [(story) => story()],
} as Meta;