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
Install favorite shared prettier config
test("should match snapshot", () => { | |
const { container } = render(<Default {...props} />); | |
expect(container.firstChild).toMatchSnapshot(); | |
}); |
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", () => { |
import { axe } from "jest-axe"; | |
test("should be accessible", async () => { | |
const { container } = render(<Component />); | |
expect(await axe(container)).toHaveNoViolations(); | |
}); |
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", () => { |
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(); |
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(""); | |
}); |
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; |
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>; | |
} |
import React, { FunctionComponent } from "react"; | |
type Props = React.SVGProps<any> & { | |
className: string; | |
title?: string; | |
}; | |
const Download: FunctionComponent<Props> = ({ | |
className, | |
title, |
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
Install favorite shared prettier config