tidusia

import React from "react";
import { render } from "@testing-library/react";
import { Props } from ".";
import { Default } from "./index.stories";

test("should render the title", () => {
  const props = Default.args as Props;
  const { getByText } = render(<Default {...props} />);
  const actual = getByText(props.title);
  expect(actual).toBeInTheDocument();

tidusia

import React from "react";
import { render } from "@testing-library/react";
import { Props } from ".";
import { Default } from "./index.stories";

describe("COMPONENT_NAME", () => {
  describe("Default", () => {
    const props = Default.args as Props;

    test("should match snapshot", () => {

tidusia

import { axe } from "jest-axe";

test("should be accessible", async () => {
    const { container } = render(<Component />);
    expect(await axe(container)).toHaveNoViolations();
});

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

test("should match snapshot", () => {
    const { container } = render(<Default {...props} />);
    expect(container.firstChild).toMatchSnapshot();
});

tidusia

test("should be accessible and match snapshot", async () => {
    const { container } = render(<Default {...props} />);
    expect(await axe(container)).toHaveNoViolations();
    expect(container.firstChild).toMatchSnapshot();
});

tidusia

jest.mock("react-modal", () => ({ children }: any) => children);

tidusia

const server = setupServer(
  rest.get("/jobs", (req, res, ctx) => res(ctx.json(fixtures.jobs))),
);

beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
afterAll(() => server.close());
afterEach(() => server.resetHandlers());

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

// 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}) {