https://github.com/codecademy/component-test-setup
Standardized test setup methods for React components.
https://github.com/codecademy/component-test-setup
Last synced: 6 months ago
JSON representation
Standardized test setup methods for React components.
- Host: GitHub
- URL: https://github.com/codecademy/component-test-setup
- Owner: Codecademy
- License: mit
- Created: 2020-10-26T14:03:11.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-09T17:26:46.000Z (over 1 year ago)
- Last Synced: 2025-09-13T14:56:34.234Z (6 months ago)
- Language: TypeScript
- Size: 168 KB
- Stars: 4
- Watchers: 16
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🛠component-test-setup
[](https://prettier.io)
[](http://badge.fury.io/js/component-test-setup)
[](https://circleci.com/gh/Codecademy/component-test-setup)
[](https://gitter.im/Codecademy/component-test-setup?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Standardized test setup methods for React components.
Tired of copy and pasting default prop templates for React component tests?
Use this cute little package with React Testing Library to standardize your component setups.
> 🧠This library is a _very_ small wrapper on top of RTL, and exists only to help standardize test setup behavior.
## Usage
```shell
npm install component-test-setup --save-dev
```
For RTL, this library provides a `setup*` function that takes in:
1. Your React component class or function
2. Any prop defaults for the component _(optional)_
That function returns a `render*` function that takes in any more props and returns:
- The library's rendered equivalent: `view` for RTL
- `props`: The computed props the component rendered with.
### React Testing Library
Use `setupRtl` to create a `renderView` function.
It returns a `view` result from RTL and a `props` object of the computed props used to render.
```js
import { setupRtl } from "component-test-setup";
import { MyComponent } from "./MyComponent";
const renderView = setupRtl(MyComponent, {
someProp: "value",
});
describe("MyComponent", () => {
it("does a thing", () => {
const { props, view } = renderView({
someProp: "otherProp",
});
view.getByText(props.someProp);
});
});
```
#### RTL `options`
The `setupRtl` API in particular allows a `.options` function on the returned `renderView` function to set the RTL [`RenderOptions`](https://testing-library.com/docs/react-testing-library/api#render-options).
```ts
const { view } = renderView(MyComponent).options({
wrapper: AllTheProviders,
});
```
### Enzyme
Previous versions of this library supported Enzyme, but with the upgrade to React-18 and Enzyme nop longer being supported,
this library has moved to a place of no longer supporting it either.
For Enzyme support, please check older major versions of this library.
### Updating Props
Often you'd like to test lifecycle methods/hooks and `component-test-setup` is written to help accommodate that.
The `update` method returned in the `render*` method:
```js
const renderView = setupRtl(MyComponent, {
someProp: "value",
});
describe("MyComponent", () => {
it("does a thing", () => {
const { view, update } = renderView({
some: "otherProp",
});
update({ someProp: "another-value" });
view.getByText("another-value"); // It has been updated to render with the new someProp value
});
});
```
Please note: This currently _does not_ update the `props` object that's returned in the `render*` method. It will be locked into whatever the initial completed props were for the first render.
### TypeScript Usage
`component-test-setup` is written in TypeScript and generally type safe.
- Props passed to components are typed as the component's props.
- If a subset of required props are passed as defaults, the returned `render*` function will require only remaining required props.
```ts
type MyComponentProps = {
requiredA: string;
requiredB: string;
};
declare const MyComponent: React.ComponentType;
const renderView = setupRtl(MyComponent, {
requiredA: "a",
});
describe("MyComponent", () => {
it("does a thing", () => {
const { props, view } = renderView({
requiredB: "b",
});
view.getByText(props.someProp);
});
});
```
- It is also set up to understand which of the required props have already been passed and which ones have not, allowing you to bypass sending anything at all into the `render*` method if you've already passed everything it needs:
```ts
type MyComponentProps = {
requiredA: string;
requiredB: string;
};
declare const MyComponent: React.ComponentType;
const renderView = setupRtl(MyComponent, {
requiredA: "a",
requiredB: "b",
});
describe("MyComponent", () => {
it("does a thing", () => {
const { props, view } = renderView();
view.getByText(props.someProp);
});
});
```
- And of course, you may always provide overrides and/or optional props into your `render*` methods:
```ts
type MyComponentProps = {
requiredA: string;
optional?: string;
};
declare const MyComponent: React.ComponentType;
const renderView = setupRtl(MyComponent, {
requiredA: "a",
});
describe("MyComponent", () => {
it("does a thing", () => {
const { props, view } = renderView({
requiredA: "override",
optional: "I don't need to be here, but I wanna be",
});
view.getByText(props.someProp);
});
});
```
_Heck yes._ 🤘
## Development
Requires:
- [Node.js](https://nodejs.org) >12
- [Yarn](https://yarnpkg.com/en)
After [forking the repo from GitHub](https://help.github.com/articles/fork-a-repo):
```shell
git clone https://github.com//component-test-setup
cd component-test-setup
yarn
```
### Publishing New Versions
CI will automatically publish a new version when it sees a new version tag.
Locally, you can trigger this if you have admin permissions:
```shell
git checkout main
npm version
git push
```
### Contribution Guidelines
We'd love to have you contribute!
Check the [issue tracker](https://github.com/Codecademy/component-test-setup/issues) for issues labeled [`accepting prs`](https://github.com/Codecademy/component-test-setup/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3A%22accepting+prs%22) to find bug fixes and feature requests the community can work on.
If this is your first time working with this code, the [`good first issue`](https://github.com/Codecademy/component-test-setup/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22+) label indicates good introductory issues.
Please note that this project is released with a [Contributor Covenant](https://www.contributor-covenant.org).
By participating in this project you agree to abide by its terms.
See [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).