https://github.com/voodoocreation/react-test-wrapper
A set of classes to make setting up React components for unit tests easy.
https://github.com/voodoocreation/react-test-wrapper
enzyme jest react react-component react-components react-redux react-test react-test-wrapper react-testing react-testing-library reactjs redux test test-wrapper testing tests typescript unit-test unit-testing unit-tests
Last synced: 4 months ago
JSON representation
A set of classes to make setting up React components for unit tests easy.
- Host: GitHub
- URL: https://github.com/voodoocreation/react-test-wrapper
- Owner: voodoocreation
- Created: 2019-12-10T03:36:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-24T04:12:20.000Z (over 1 year ago)
- Last Synced: 2024-04-26T04:04:46.187Z (about 1 year ago)
- Topics: enzyme, jest, react, react-component, react-components, react-redux, react-test, react-test-wrapper, react-testing, react-testing-library, reactjs, redux, test, test-wrapper, testing, tests, typescript, unit-test, unit-testing, unit-tests
- Language: TypeScript
- Homepage:
- Size: 577 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Test Wrapper
==================
The intention of this package is to provide a simple, clean way of setting up your React components
for unit tests, to reduce test setup boilerplate code, whilst automatically inferring your component
TypeScript definitions (props, instance methods etc) to avoid needing to manually import types and
retype definitions in your tests and also providing better inline IDE autocomplete/validation support.
The classes provided are also able to be extended to add to the API that's available, if your
project requires additional functionality as part of your component test setup.
The concept behind it is that you can create a single instance of the wrapper class at the top of
your test file and define the defaults to use there, then in each test scenario you can reference
the single instance and define the scenario-specific props/children etc. chaining the public methods,
then finally calling the `render` method to return the rendering result.
The scenario-specific definitions are reset each time you call `render`, which
will ensure it reverts back to only the defaults set at the top and prevents scenario data from leaking
between tests.
## Example
```typescript jsx
import { screen, Wrapper } from "react-test-wrapper";
const component = new Wrapper(SomeComponent)
.withDefaultChildren(
)
.withDefaultProps({
prop1: "Default value 1",
prop2: "Default value 2"
});
describe("when testing a scenario", () => {
let result: ReturnType;
it("renders the component", () => {
result = component
.withProps({
prop1: "Scenario value 1"
})
.render();
});
it("uses the scenario-specific value for prop1", () => {
expect(screen.getByText("Scenario value 1")).toBeDefined();
});
it("uses the default value for prop2", () => {
expect(screen.getByText("Default value 2")).toBeDefined();
});
it("updates the props", () => {
result.updateProps({
prop1: "New scenario value 1"
});
});
it("renders the new prop value", () => {
expect(screen.getByText("New scenario value 1")).toBeDefined();
});
});
```
Package contents
----------------
- [`Wrapper`](/docs/react-testing-library/Wrapper.md)
- [`WrapperWithIntl`](/docs/react-testing-library/WrapperWithIntl.md)
- [`WrapperWithRedux`](/docs/react-testing-library/WrapperWithRedux.md)
- [Custom `react-testing-library` queries](/docs/react-testing-library/queries.md)