npm i -D prettier
- package.json scripts:
"format": "prettier \"src/**/*.{js,html}\" --write"
touch .prettierrc
avec :{ "trailingComma": "es5" }
- Enable the option Run on save for files.
import React from 'react'; | |
import PropTypes from 'prop-types'; | |
const AppBar = ({ | |
children, | |
className, | |
iconElementLeft, | |
iconElementRight, | |
title, | |
titleStyle, |
import React from 'react'; | |
import ShallowRenderer from 'react-test-renderer/shallow'; | |
import AppBar from '../'; | |
describe('<AppBar />', () => { | |
const renderer = new ShallowRenderer(); | |
it('should match snapshot without props', () => { | |
renderer.render(<AppBar />); |
describe("here name which function or feature you are testing", () => { | |
it("here explain what specific part of the feature should do", () => { | |
expect(1 + 1).toBe(2); | |
}); | |
}); |
export const ACTIONS = { | |
GET_USER_REQUEST: "GET_USER_REQUEST", | |
GET_USER_SUCCESS: "GET_USER_SUCCESS", | |
GET_USER_FAILURE: "GET_USER_FAILURE" | |
}; | |
export const initialState = { | |
isFetching: false, | |
errors: [], | |
profile: {} |
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, { FunctionComponent } from "react"; | |
type Props = React.SVGProps<any> & { | |
className: string; | |
title?: string; | |
}; | |
const Download: FunctionComponent<Props> = ({ | |
className, | |
title, |
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 from "react"; | |
import { Meta, Story } from "@storybook/react"; | |
import MyComponent, { MyComponentProps } from "."; | |
export default { | |
title: "MyComponent", | |
component: MyComponent, | |
decorators: [(story) => story()], | |
} as Meta; |
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(""); | |
}); |