tidusia

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

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 { axe } from "jest-axe";

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

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 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

test("should render an empty firstname input", () => {
    const props = Default.args as Props;
    const { getByLabelText } = render(<Default {...props} />);
    const input = getByLabelText("Firstname") as HTMLInputElement;
    expect(input).toBeInTheDocument();
    expect(input.value).toBe("");
  });

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;

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 React, { FunctionComponent } from "react";

type Props = React.SVGProps<any> & {
  className: string;
  title?: string;
};

const Download: FunctionComponent<Props> = ({
  className,
  title,

tidusia

CRA TypeScript

A quick reminder with the scripts and tools to create high quality React app with TypeScript

• npx create-react-app APP_NAME --template typescript --use-npm
• Add .idea/ .gitignore

Prettier

Install favorite shared prettier config