api
docs
env
git
hbs
html
husky
jest
lintstaged
lisp
node
prettier
python
react
readme
schema
style
util
vue
web
$ tmpl react fc [name] -m mobxStoreName
Create a functional component with mobx store connection.
Files
project
└─src
└──components
└───foo
└────__tests__
└─────foo.test.jsx
└────foo.css
└────foo.jsx
↑ foo.test.jsx
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", () => {// Arrangeconst { baseElement } = render(<Foo />);// Actconst element = baseElement.firstChild;// Assertexpect(element).not.toBeNull();});});describe("Accessibility", () => {it("should have no accessibility violations", async done => {// Arrangeconst { baseElement } = render(<Foo />);// Actconst results = await axe(baseElement.outerHTML);// Assertexpect.extend(toHaveNoViolations);expect(results).toHaveNoViolations();// Cleanupdocument.body.innerHTML = "";done();});});describe("Interactions", () => {it.todo("should do something...");});});
↑ foo.css
.foo {}
↑ foo.jsx
import React from "react";import { observer } from "mobx-react";import { mobxStoreName } from "@stores/mobxStoreName";import "./foo.css";export const Foo = props => {return (<div className="foo" role="none">-- Foo Component --</div>);};export const FooConnected = () => <Foo mobxStoreName={mobxStoreName} />;