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
jest.mock("react-modal", () => ({ children }: any) => children); |
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()); |
test("should be accessible and match snapshot", async () => { | |
const { container } = render(<Default {...props} />); | |
expect(await axe(container)).toHaveNoViolations(); | |
expect(container.firstChild).toMatchSnapshot(); | |
}); |
test("should match snapshot", () => { | |
const { container } = render(<Default {...props} />); | |
expect(container.firstChild).toMatchSnapshot(); | |
}); |
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
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 * 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", () => { |
// 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}) { |
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); | |
}); |
# Global docker ignore | |
**/.dockerignore | |
docker-compose.yml | |
Dockerfile* | |
*.dockerfile | |
.git/ | |
# Nodejs app ignore | |
node_modules/ |