-
Notifications
You must be signed in to change notification settings - Fork 10
/
sharedStoreProps.test.tsx
78 lines (66 loc) · 1.95 KB
/
sharedStoreProps.test.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React from 'react';
import { initStore, collect, WithStoreProp } from '../..';
import * as testUtils from '../testUtils';
beforeEach(() => {
initStore();
});
/**
* Passing anything from the store into a collected component can be trouble.
* @see https://github.com/davidgilbertson/react-recollect/issues/102
*/
it('should error when sharing between collected components', () => {
initStore({
tasks: [
{
id: 1,
name: 'Task one',
},
],
});
const ChildComponent = ({ task }: any) => <div>{task.name}</div>;
const ChildComponentCollected = collect(ChildComponent);
// Shouldn't matter how many levels deep the prop is passed
const MiddleComponent = ({ task }: any) => (
<div>
<ChildComponentCollected task={task} />
</div>
);
const ParentComponent = collect(({ store }: WithStoreProp) => (
<div>
{!!store.tasks &&
store.tasks.map((task) => (
<MiddleComponent key={task.id} task={task} />
))}
</div>
));
const errorMessage = testUtils.expectToLogError(() => {
testUtils.renderStrict(<ParentComponent />);
});
// Just a partial match...
expect(errorMessage).toMatch(
'Either remove the collect() wrapper from <ChildComponent/>, or remove the "task" prop'
);
});
it('can bypass sharing warning by shallow cloning', () => {
initStore({
tasks: [
{
id: 1,
name: 'Task one',
},
],
});
const ChildComponent = ({ task }: any) => <div>{task.name}</div>;
const ChildComponentCollected = collect(ChildComponent);
const ParentComponent = collect(({ store }: WithStoreProp) => (
<div>
{!!store.tasks &&
store.tasks.map((task) => (
// Shallow cloning task here 'detaches' it from the store
<ChildComponentCollected key={task.id} task={{ ...task }} />
))}
</div>
));
const { getByText } = testUtils.renderStrict(<ParentComponent />);
getByText('Task one');
});