tmpl-cli
api
docs
env
git
hbs
html
husky
jest
lintstaged
lisp
node
prettier
python
react
Summaryreact context [name]react fc [name]react fc [name] -c contextNamereact fc [name] -m mobxStoreNamereact fc [name] -treact initreact mst [name]
readme
schema
style
util
vue
web

$ tmpl react fc [name] -t

Create a functional component.

Force Typescript

Files

project
└─src
└──components
└───foo
└────__tests__
└─────foo.test.tsx
└────foo.css
└────foo.tsx

foo.test.tsx

import React from "react";
import { render } from "@testing-library/react";
import { axe, toHaveNoViolations } from "jest-axe";
import { Foo } from "../foo";
describe("Component: Foo", () => {
describe("Render", () => {
it("should render without error", () => {
// Arrange
const { baseElement } = render(<Foo />);
// Act
const element = baseElement.firstChild;
// Assert
expect(element).not.toBeNull();
});
});
describe("Accessibility", () => {
it("should have no accessibility violations", async done => {
// Arrange
const { baseElement } = render(<Foo />);
// Act
const results = await axe(baseElement.outerHTML);
// Assert
expect.extend(toHaveNoViolations);
expect(results).toHaveNoViolations();
// Cleanup
document.body.innerHTML = "";
done();
});
});
describe("Interactions", () => {
it.todo("should do something...");
});
});

foo.css

.foo {
}

foo.tsx

import React from "react";
import "./foo.css";
interface IProps {
propData?: string;
}
export const Foo: React.FC<IProps> = (props: IProps) => {
return (
<div className="foo" role="none">
-- Foo Component --
</div>
);
};