|
| 1 | +`WrapperWithRedux` |
| 2 | +================= |
| 3 | + |
| 4 | +This abstract class has a `WrappingComponent` defined which wraps the component in a Redux `Provider`, |
| 5 | +passing in the return value from the `createStore` method. |
| 6 | + |
| 7 | +To use this class, you have to extend it, pass in your store state type in the class declaration and |
| 8 | +define your own `createStore` method to return an instance of your Redux store, using the |
| 9 | +`initialState` and `middlewares` that this class provides - it is important to ensure that your |
| 10 | +store uses these, because if it disregards them, none of the methods this class provides will function. |
| 11 | + |
| 12 | +Extensions to the returned `ReduxWrapper` |
| 13 | +----------------------------------------- |
| 14 | + |
| 15 | +The return type of the `mount` method extends Enzyme's `ReactWrapper` by adding a store property to |
| 16 | +it, so you can access the store instance that the component was mounted with. This is useful for |
| 17 | +some edge cases where you may want to test how your component reacts to actions being dispatched |
| 18 | +outside of the component's scope. |
| 19 | + |
| 20 | +For example: |
| 21 | +```typescript jsx |
| 22 | +const component = new WrapperWithRedux(SomeComponent); |
| 23 | + |
| 24 | +describe("when testing a scenario", () => { |
| 25 | + const wrapper = component |
| 26 | + .withReduxState({ |
| 27 | + test: { |
| 28 | + value: "Scenario value 1" |
| 29 | + } |
| 30 | + }) |
| 31 | + .mount(); |
| 32 | + |
| 33 | + it("renders the initial value", () => { |
| 34 | + expect(wrapper.find(".SomeComponent--value").text()).toBe("Initial value"); |
| 35 | + }); |
| 36 | + |
| 37 | + it("dispatches actions.setValue", () => { |
| 38 | + wrapper.store.dispatch(actions.setValue("New value")); |
| 39 | + }); |
| 40 | + |
| 41 | + it("renders the updated value", () => { |
| 42 | + expect(wrapper.find(".SomeComponent--value").text()).toBe("New value"); |
| 43 | + }); |
| 44 | +}); |
| 45 | +``` |
| 46 | + |
| 47 | + |
| 48 | +Public read-only properties |
| 49 | +--------------------------- |
| 50 | + |
| 51 | +### `reduxHistory` |
| 52 | +An array of actions that have been dispatched, used when asserting that actions have been |
| 53 | +dispatched as expected during interactions or in the component lifecycle. |
| 54 | + |
| 55 | + |
| 56 | +Public methods |
| 57 | +-------------- |
| 58 | + |
| 59 | +In addition to the public methods provided by the base [`Wrapper`](Wrapper.md) class, the following |
| 60 | +methods are available. |
| 61 | + |
| 62 | +### `withDefaultReduxState` |
| 63 | +Sets the default Redux store state to be used for the wrapper instance. |
| 64 | + |
| 65 | +### `withReduxState` |
| 66 | +Sets the scenario-specific Redux store state to be used - cleared after `render` is called. |
| 67 | + |
| 68 | +### `render` |
| 69 | +Mounts the component with the `react-testing-library` `render` function, using the currently-set data. |
| 70 | +Returns a `RenderResult` instance, which also includes a `store` property. |
| 71 | + |
| 72 | + |
| 73 | +How to extend for use in your project |
| 74 | +------------------------------------- |
| 75 | + |
| 76 | +```typescript jsx |
| 77 | +import * as React from "react"; |
| 78 | +import { WrapperWithRedux as BaseWrapper } from "react-test-wrapper/react-testing-library"; |
| 79 | + |
| 80 | +import { createStore, TStoreState } from "../store"; |
| 81 | + |
| 82 | +class Wrapper< |
| 83 | + C extends React.ComponentType<any>, |
| 84 | + S extends {} = TStoreState, |
| 85 | + P extends React.ComponentProps<C> = React.ComponentProps<C> |
| 86 | +> extends BaseWrapper<C, S, P> { |
| 87 | + protected createStore( |
| 88 | + initialState: DeepPartial<S>, |
| 89 | + middlewares: Middleware[] |
| 90 | + ) { |
| 91 | + return createStore(initialState, middlewares); |
| 92 | + } |
| 93 | +} |
| 94 | +``` |
0 commit comments