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] -c contextName

Create a functional component with context connected.

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", () => {
// 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.jsx

import React, { useContext } from "react";
import { ContextName, contextNameEmptyState, contextNameEmptyActions } from "@stores/contextName";
import "./foo.css";
export const Foo = props => {
return (
<div className="foo" role="none">
-- Foo Component --
</div>
);
};
export const fooConnected = () => {
const contextName = useContext(ContextName);
return <Foo contextNameActions={contextName.actions} contextNameData={contextName.state}></Foo>;
};