Skip to content

Commit 3440a70

Browse files
author
Raice Hannay
committed
fix docs
1 parent 35862e7 commit 3440a70

File tree

9 files changed

+221
-32
lines changed

9 files changed

+221
-32
lines changed

Diff for: ‎.gitignore

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ logs
66
coverage
77
dist
88
lib
9-
enzyme/
10-
react-testing-library/
9+
/enzyme/
10+
/react-testing-library/
1111

1212
#node
1313
node_modules

Diff for: ‎README.md

+10-4
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,13 @@ describe("when testing a scenario", () => {
7575
Package contents
7676
----------------
7777

78-
- [`Wrapper`](./docs/Wrapper.md)
79-
- [`WrapperWithIntl`](./docs/WrapperWithIntl.md)
80-
- [`WrapperWithRedux`](./docs/WrapperWithRedux.md)
81-
- [Custom `react-testing-library` queries](./docs/react-testing-library/queries.md)
78+
## For `enzyme`
79+
- [`Wrapper`](/docs/enzyme/Wrapper.md)
80+
- [`WrapperWithIntl`](/docs/enzyme/WrapperWithIntl.md)
81+
- [`WrapperWithRedux`](/docs/enzyme/WrapperWithRedux.md)
82+
83+
## For `react-testing-library`
84+
- [`Wrapper`](/docs/react-testing-library/Wrapper.md)
85+
- [`WrapperWithIntl`](/docs/react-testing-library/WrapperWithIntl.md)
86+
- [`WrapperWithRedux`](/docs/react-testing-library/WrapperWithRedux.md)
87+
- [Custom `react-testing-library` queries](/docs/react-testing-library/queries.md)

Diff for: ‎docs/Wrapper.md renamed to ‎docs/enzyme/Wrapper.md

+1-21
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Protected abstract methods to define when extending
1313
### `beforeMount`
1414
This method is called before `mount`, `render` or `shallow` are called. The intention is to use this
1515
when defining any instance properties that need to be passed as props in your `WrappingComponent`,
16-
such as the Redux store instance (see [`WrapperWithRedux`](./WrapperWithRedux.md) for example).
16+
such as the Redux store instance (see [`WrapperWithRedux`](WrapperWithRedux.md) for example).
1717

1818

1919
Public read-only properties
@@ -62,7 +62,6 @@ There's a `WrappingComponent` property on the `Wrapper` class that will automati
6262
This is very useful when testing components that require some form of context provider component to
6363
exist in the React tree.
6464

65-
### For `enzyme`
6665
```typescript jsx
6766
import * as React from "react";
6867
import { Wrapper as BaseWrapper } from "react-test-wrapper/enzyme";
@@ -80,22 +79,3 @@ export class WrapperWithCustomStuff<
8079
// Add custom properties and methods here
8180
}
8281
```
83-
84-
### For `react-testing-library`
85-
```typescript jsx
86-
import * as React from "react";
87-
import { Wrapper as BaseWrapper } from "react-test-wrapper/react-testing-library";
88-
89-
export class WrapperWithCustomStuff<
90-
C extends React.ComponentType<any>,
91-
P extends React.ComponentProps<C> = React.ComponentProps<C>
92-
> extends BaseWrapper<C, P> {
93-
protected WrappingComponent: React.FC = ({ children }) => (
94-
<SomeProviderComponent>
95-
{children}
96-
</SomeProviderComponent>
97-
);
98-
99-
// Add custom properties and methods here
100-
}
101-
```

Diff for: ‎docs/WrapperWithIntl.md renamed to ‎docs/enzyme/WrapperWithIntl.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ To use this class, you have to extend it and define your own `intlProviderProps`
1010

1111
Public methods
1212
--------------
13-
The public methods are identical to the base [`Wrapper`](./Wrapper.md) class.
13+
The public methods are identical to the base [`Wrapper`](Wrapper.md) class.
1414

1515

1616
How to extend for use in your project
@@ -19,7 +19,7 @@ How to extend for use in your project
1919
```typescript jsx
2020
import * as React from "react";
2121
import { IntlConfig } from "react-intl";
22-
import { WrapperWithIntl as BaseWrapper } from "react-test-wrapper";
22+
import { WrapperWithIntl as BaseWrapper } from "react-test-wrapper/enzyme";
2323

2424
import messages from "./locales/en-NZ";
2525

Diff for: ‎docs/WrapperWithRedux.md renamed to ‎docs/enzyme/WrapperWithRedux.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ dispatched as expected during interactions or in the component lifecycle.
5656
Public methods
5757
--------------
5858

59-
In addition to the public methods provided by the base [`Wrapper`](./Wrapper.md) class, the following
59+
In addition to the public methods provided by the base [`Wrapper`](Wrapper.md) class, the following
6060
methods are available.
6161

6262
Note:
@@ -76,12 +76,13 @@ Sets the scenario-specific Redux store state to be used - cleared after `mount`,
7676
Mounts the component with the Enzyme `mount` function, using the currently-set data.
7777
Returns a `ReactWrapper` instance, which also includes a `store` property.
7878

79+
7980
How to extend for use in your project
8081
-------------------------------------
8182

8283
```typescript jsx
8384
import * as React from "react";
84-
import { WrapperWithRedux as BaseWrapper } from "react-test-wrapper";
85+
import { WrapperWithRedux as BaseWrapper } from "react-test-wrapper/enzyme";
8586

8687
import { createStore, TStoreState } from "../store";
8788

Diff for: ‎docs/react-testing-library/Wrapper.md

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
`Wrapper`
2+
=========
3+
4+
This is the base class which is used for basic presentational components. The other classes provided
5+
extend this one, so all methods defined on this class are also available on the others.
6+
7+
As with all of these classes, you can extend it to implement your own additional functionality.
8+
9+
10+
Protected abstract methods to define when extending
11+
---------------------------------------------------
12+
13+
### `beforeRender`
14+
This method is called before `render` is called. The intention is to use this
15+
when defining any instance properties that need to be passed as props in your `WrappingComponent`,
16+
such as the Redux store instance (see [`WrapperWithRedux`](./WrapperWithRedux.md) for example).
17+
18+
19+
Public read-only properties
20+
---------------------------
21+
22+
### `props`
23+
The props the component was mounted with. Useful for avoiding needing to declare local variables
24+
for later assertion reference - especially mock function instances.
25+
26+
27+
Public methods
28+
--------------
29+
30+
### `withDefaultChildren`
31+
Sets the default children to be used for the wrapper instance.
32+
33+
### `withDefaultProps`
34+
Sets the default props to be used for the wrapper instance.
35+
36+
### `withChildren`
37+
Sets the scenario-specific children to be used - cleared afte `render` is called.
38+
39+
### `withProps`
40+
Sets the scenario-specific props to be used - cleared after `render` is called.
41+
42+
### `render`
43+
Mounts the component with the `react-testing-library` `render` function, using the currently-set data.
44+
Returns the `RenderResult` returned by the `render` function.
45+
46+
47+
How to extend
48+
-------------
49+
50+
To extend this class to implement your own setup functionality, you can do so as shown in the
51+
example below.
52+
53+
There's a `WrappingComponent` property on the `Wrapper` class that will automatically be used by
54+
`render` when it's defined, to wrap the component being tested.
55+
This is very useful when testing components that require some form of context provider component to
56+
exist in the React tree.
57+
58+
```typescript jsx
59+
import * as React from "react";
60+
import { Wrapper as BaseWrapper } from "react-test-wrapper/react-testing-library";
61+
62+
export class WrapperWithCustomStuff<
63+
C extends React.ComponentType<any>,
64+
P extends React.ComponentProps<C> = React.ComponentProps<C>
65+
> extends BaseWrapper<C, P> {
66+
protected WrappingComponent: React.FC = ({ children }) => (
67+
<SomeProviderComponent>
68+
{children}
69+
</SomeProviderComponent>
70+
);
71+
72+
// Add custom properties and methods here
73+
}
74+
```

Diff for: ‎docs/react-testing-library/WrapperWithIntl.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
`WrapperWithIntl`
2+
=================
3+
4+
This abstract class has a `WrappingComponent` defined which wraps the component in an `IntlProvider`,
5+
passing in `intlProviderProps`.
6+
7+
To use this class, you have to extend it and define your own `intlProviderProps` to set your own
8+
`messages` etc.
9+
10+
11+
Public methods
12+
--------------
13+
The public methods are identical to the base [`Wrapper`](Wrapper.md) class.
14+
15+
16+
How to extend for use in your project
17+
-------------------------------------
18+
19+
```typescript jsx
20+
import * as React from "react";
21+
import { IntlConfig } from "react-intl";
22+
import { WrapperWithIntl as BaseWrapper } from "react-test-wrapper/react-testing-library";
23+
24+
import messages from "./locales/en-NZ";
25+
26+
export class WrapperWithIntl<
27+
C extends React.ComponentType<any>,
28+
P extends React.ComponentProps<C> = React.ComponentProps<C>
29+
> extends BaseWrapper<C, P> {
30+
protected intlProviderProps: Partial<IntlConfig> = {
31+
messages
32+
};
33+
}
34+
```

Diff for: ‎docs/react-testing-library/WrapperWithRedux.md

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
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+
```

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"author": "Raice Hannay <[email protected]>",
44
"description": "A set of classes to make setting up React components for unit tests easy.",
55
"license": "ISC",
6-
"version": "3.0.3",
6+
"version": "3.0.4",
77
"keywords": [
88
"component",
99
"enzyme",

0 commit comments

Comments
 (0)