Skip to content

Instantly share code, notes, and snippets.

@mrmartineau
Created March 27, 2024 16:22
Show Gist options
  • Save mrmartineau/00bdd540bb499b71ccfdd0af826d063b to your computer and use it in GitHub Desktop.
Save mrmartineau/00bdd540bb499b71ccfdd0af826d063b to your computer and use it in GitHub Desktop.
export { ZandersComponent } from './ZandersComponent'
.ZandersComponentWrapper {
}

ZandersComponent

Usage

export { ZandersComponent } from './ZandersComponent'

<ZandersComponent>Some content</ZandersComponent>
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();
},
};
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();
});
});
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>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment