renders
64 | getByText('Parent render count: 2');
65 | getByText('Parent value: x');
66 | getByText('Child render count: 2'); // Just 1 more. Good.
67 | getByText('Child value: x');
68 | getByText('Child value fromParent: x!');
69 |
70 | globalStore.value = 'y';
71 |
72 | getByText('Parent render count: 3');
73 | getByText('Parent value: y');
74 | getByText('Child render count: 3');
75 | getByText('Child value: y');
76 | getByText('Child value fromParent: y!');
77 | });
78 |
--------------------------------------------------------------------------------
/tests/integration/setStoreTwiceInOnClick.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { collect, store as globalStore, WithStoreProp } from '../..';
3 | import * as testUtils from '../testUtils';
4 |
5 | const TestComponent = collect(({ store }: WithStoreProp) => (
6 |
7 | {store.tasks &&
8 | store.tasks.map((task) =>
{task.name}
)}
9 |
10 | {!!store.tasks ||
You have no tasks
}
11 |
12 |
19 |
20 |
36 |
37 | {!!store.page && (
38 | <>
39 |
48 |
{`Status: ${store.page.status}`}
49 |
50 | )}
51 |
{task.name}
;
24 | const ChildComponentCollected = collect(ChildComponent);
25 |
26 | // Shouldn't matter how many levels deep the prop is passed
27 | const MiddleComponent = ({ task }: any) => (
28 |
29 |
30 |
31 | );
32 |
33 | const ParentComponent = collect(({ store }: WithStoreProp) => (
34 |
35 | {!!store.tasks &&
36 | store.tasks.map((task) => (
37 |
38 | ))}
39 |
40 | ));
41 |
42 | const errorMessage = testUtils.expectToLogError(() => {
43 | testUtils.renderStrict();
44 | });
45 |
46 | // Just a partial match...
47 | expect(errorMessage).toMatch(
48 | 'Either remove the collect() wrapper from , or remove the "task" prop'
49 | );
50 | });
51 |
52 | it('can bypass sharing warning by shallow cloning', () => {
53 | initStore({
54 | tasks: [
55 | {
56 | id: 1,
57 | name: 'Task one',
58 | },
59 | ],
60 | });
61 |
62 | const ChildComponent = ({ task }: any) => {task.name}
;
63 | const ChildComponentCollected = collect(ChildComponent);
64 |
65 | const ParentComponent = collect(({ store }: WithStoreProp) => (
66 |
67 | {!!store.tasks &&
68 | store.tasks.map((task) => (
69 | // Shallow cloning task here 'detaches' it from the store
70 |
71 | ))}
72 |
73 | ));
74 |
75 | const { getByText } = testUtils.renderStrict();
76 |
77 | getByText('Task one');
78 | });
79 |
--------------------------------------------------------------------------------
/tests/integration/siblingIsolation.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import { collect, store as globalStore, WithStoreProp } from '../..';
4 |
5 | let renderCountOne = 0;
6 | let renderCountTwo = 0;
7 | let renderCountThree = 0;
8 |
9 | const One = ({ store }: WithStoreProp) => {
10 | renderCountOne++;
11 | return {`This is ${store.areas.one.name}`}
;
12 | };
13 | const OneCollected = collect(One);
14 |
15 | const Two = ({ store }: WithStoreProp) => {
16 | renderCountTwo++;
17 | return {`This is ${store.areas.two.name}`}
;
18 | };
19 | const TwoCollected = collect(Two);
20 |
21 | const Three = ({ store }: WithStoreProp) => {
22 | renderCountThree++;
23 | return {`This is ${store.areas.three.name}`}
;
24 | };
25 | const ThreeCollected = collect(Three);
26 |
27 | const Parent = () => (
28 |
29 |
30 |
31 |
32 |
33 | );
34 |
35 | globalStore.areas = {
36 | one: {
37 | name: 'Area one',
38 | },
39 | two: {
40 | name: 'Area two',
41 | },
42 | three: {
43 | name: 'Area three',
44 | },
45 | };
46 |
47 | it('should handle isolation', () => {
48 | const { getByText } = render();
49 | expect(renderCountOne).toBe(1);
50 | expect(renderCountTwo).toBe(1);
51 | expect(renderCountThree).toBe(1);
52 |
53 | // should render the title
54 | getByText('This is Area one');
55 | getByText('This is Area two');
56 | getByText('This is Area three');
57 |
58 | globalStore.areas.one.name = 'A new place';
59 |
60 | getByText('This is A new place');
61 | getByText('This is Area two');
62 | getByText('This is Area three');
63 |
64 | expect(renderCountOne).toBe(2);
65 |
66 | // These two won't update
67 | expect(renderCountTwo).toBe(1);
68 | expect(renderCountThree).toBe(1);
69 | });
70 |
--------------------------------------------------------------------------------
/tests/integration/storeVPlainObject.test.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This test suite is a collection of the ways in which the Recollect store
3 | * behaves differently to a plain JavaScript object.
4 | */
5 | import { store } from '../..';
6 |
7 | it('will create a new object', () => {
8 | store.data = {
9 | foo: 'bar',
10 | };
11 |
12 | const originalData = store.data;
13 |
14 | store.data.foo = 'baz';
15 |
16 | // These two are now separate objects. This is required for React to work
17 | expect(originalData).not.toBe(store.data);
18 |
19 | // But when you read any value from them, they will contain the same data
20 | expect(originalData).toEqual(store.data);
21 | expect(originalData.foo).toEqual('baz');
22 | expect(store.data.foo).toEqual('baz');
23 | });
24 |
--------------------------------------------------------------------------------
/tests/integration/types.test.ts:
--------------------------------------------------------------------------------
1 | import { store, initStore } from '../..';
2 |
3 | beforeEach(() => {
4 | initStore();
5 | });
6 |
7 | const getType = (item: any) =>
8 | Object.prototype.toString.call(item).replace('[object ', '').replace(']', '');
9 |
10 | it('should should have the correct type', () => {
11 | store.array = [];
12 | store.date = new Date();
13 | store.boolean = false;
14 | store.map = new Map();
15 | store.null = null;
16 | store.number = 77;
17 | store.object = {};
18 | store.regExp = /cats/;
19 | store.set = new Set();
20 | store.string = 'string';
21 |
22 | expect(typeof store.array).toBe('object');
23 | expect(typeof store.date).toBe('object');
24 | expect(typeof store.boolean).toBe('boolean');
25 | expect(typeof store.map).toBe('object');
26 | expect(typeof store.null).toBe('object');
27 | expect(typeof store.number).toBe('number');
28 | expect(typeof store.object).toBe('object');
29 | expect(typeof store.regExp).toBe('object');
30 | expect(typeof store.set).toBe('object');
31 | expect(typeof store.string).toBe('string');
32 |
33 | expect(getType(store.array)).toBe('Array');
34 | expect(getType(store.date)).toBe('Date');
35 | expect(getType(store.boolean)).toBe('Boolean');
36 | expect(getType(store.map)).toBe('Map');
37 | expect(getType(store.null)).toBe('Null');
38 | expect(getType(store.number)).toBe('Number');
39 | expect(getType(store.object)).toBe('Object');
40 | expect(getType(store.regExp)).toBe('RegExp');
41 | expect(getType(store.set)).toBe('Set');
42 | expect(getType(store.string)).toBe('String');
43 |
44 | expect(Array.isArray(store.array)).toBe(true);
45 |
46 | expect(store.map instanceof Map).toBe(true);
47 | expect(store.set instanceof Set).toBe(true);
48 | });
49 |
50 | it('should should have typeof undefined', () => {
51 | expect(store.foo).toBeUndefined();
52 | expect(typeof store.foo).toBe('undefined');
53 |
54 | store.foo = 'bar';
55 | expect(typeof store.foo).not.toBe('undefined');
56 |
57 | delete store.foo;
58 | expect(typeof store.foo).toBe('undefined');
59 | });
60 |
--------------------------------------------------------------------------------
/tests/integration/unCollectedChildren.test.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Child components that render items in an array should not need to be wrapped in collect()
3 | */
4 | import React from 'react';
5 | import { render } from '@testing-library/react';
6 | import {
7 | afterChange,
8 | collect,
9 | store as globalStore,
10 | WithStoreProp,
11 | } from '../..';
12 | import { TaskType } from '../testUtils';
13 |
14 | globalStore.tasks = [
15 | { id: 0, name: 'task 0', done: false },
16 | { id: 1, name: 'task 1', done: false },
17 | ];
18 |
19 | const handleChange = jest.fn();
20 | let taskListRenderCount = 0;
21 | let taskRenderCount = 0;
22 |
23 | afterChange(handleChange);
24 |
25 | afterEach(() => {
26 | handleChange.mockClear();
27 | });
28 |
29 | type Props = {
30 | task: TaskType;
31 | };
32 |
33 | const Task = React.memo(({ task }: Props) => {
34 | taskRenderCount++;
35 |
36 | return (
37 |
49 | );
50 | });
51 |
52 | const TaskList = ({ store }: WithStoreProp) => {
53 | taskListRenderCount++;
54 |
55 | return (
56 |
57 | {store.tasks &&
58 | store.tasks.map((task) => )}
59 |
60 | );
61 | };
62 |
63 | const CollectedTaskList = collect(TaskList);
64 |
65 | it('should update a parent component when a prop is changed on a child component', () => {
66 | const { getByText, getByLabelText } = render();
67 | const getInputByLabelText = (text: string) =>
68 | getByLabelText(text) as HTMLInputElement;
69 |
70 | expect(taskListRenderCount).toBe(1);
71 | expect(taskRenderCount).toBe(2);
72 |
73 | getByText('task 0');
74 |
75 | expect(getInputByLabelText('task 0').checked).toBe(false);
76 |
77 | getByLabelText('task 0').click(); // in the
78 |
79 | const changeEvent = handleChange.mock.calls[0][0];
80 | expect(changeEvent.changedProps).toEqual(['tasks.0.done']);
81 | expect(changeEvent.renderedComponents[0]._name).toBe('TaskList');
82 |
83 | expect(taskListRenderCount).toBe(2);
84 | expect(taskRenderCount).toBe(3); // only one task should update
85 |
86 | expect(getInputByLabelText('task 0').checked).toBe(true);
87 | });
88 |
--------------------------------------------------------------------------------
/tests/objectTypes/array.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { initStore, store as globalStore, WithStoreProp } from '../..';
3 | import * as testUtils from '../testUtils';
4 |
5 | let renderCount: number;
6 | let taskNumber: number;
7 | let taskId: number;
8 | const log = jest.fn();
9 |
10 | beforeEach(() => {
11 | initStore({
12 | tasks: [],
13 | });
14 | renderCount = 0;
15 | taskNumber = 1;
16 | taskId = -1;
17 | log.mockReset();
18 | });
19 |
20 | type Props = {
21 | task: testUtils.TaskType;
22 | };
23 |
24 | it('should operate on arrays', () => {
25 | const Task = (props: Props) => {props.task.name}
;
26 |
27 | const { getByText, queryByText } = testUtils.collectAndRender(
28 | ({ store }: WithStoreProp) => {
29 | renderCount++;
30 |
31 | return (
32 |
33 |
47 |
48 |
55 |
56 |
63 |
64 | {!!store.tasks && !!store.tasks.length && (
65 | <>
66 |
Task list
67 |
68 | {store.tasks.map((task) => (
69 |
70 | ))}
71 |
72 | )}
73 |
74 | );
75 | }
76 | );
77 |
78 | expect(renderCount).toBe(1);
79 |
80 | expect(queryByText('Task list')).toBeNull();
81 |
82 | // should handle adding an item to an array
83 | getByText('Add task').click();
84 |
85 | expect(renderCount).toBe(2);
86 | expect(getByText('Task list'));
87 | expect(getByText('Task number 1'));
88 | // Reading immediately should already have the new length property
89 | expect(log).toHaveBeenCalledWith(1);
90 | expect(globalStore.tasks && globalStore.tasks.length).toBe(1);
91 |
92 | // should handle removing an item from an array
93 | getByText('Add task').click();
94 | getByText('Add task').click();
95 | expect(renderCount).toBe(4);
96 |
97 | expect(getByText('Task number 2'));
98 | expect(getByText('Task number 3'));
99 |
100 | getByText('Remove last task').click();
101 | expect(renderCount).toBe(5);
102 |
103 | expect(queryByText('Task number 3')).toBeNull();
104 |
105 | // should handle deleting an entire array
106 | expect(getByText('Task list'));
107 |
108 | getByText('Remove all tasks').click();
109 | expect(renderCount).toBe(6);
110 |
111 | expect(queryByText('Task list')).toBeNull();
112 | });
113 |
114 | it('should push then update', () => {
115 | globalStore.arr = [];
116 | globalStore.arr.push({ name: 'A two', done: false });
117 | globalStore.arr.unshift({ name: 'Task one', done: false });
118 | globalStore.arr[0].done = true;
119 |
120 | expect(globalStore.arr).toEqual([
121 | { name: 'Task one', done: true },
122 | { name: 'A two', done: false },
123 | ]);
124 | });
125 |
126 | /**
127 | * This tests that array mutator methods behave as expected, and that they
128 | * only re-render the component once each.
129 | */
130 | it('should update once for array mutator methods', () => {
131 | globalStore.arr = [];
132 | type Props = {
133 | store: {
134 | arr: number[];
135 | };
136 | };
137 |
138 | renderCount = 0;
139 |
140 | const { getByText } = testUtils.collectAndRender(({ store }: Props) => {
141 | renderCount++;
142 |
143 | return {`Array: ${store.arr?.join(', ') || 'none'}`}
;
144 | });
145 |
146 | expect(testUtils.getAllListeners()).toEqual(['arr']);
147 |
148 | getByText('Array: none');
149 | expect(renderCount).toBe(1);
150 | renderCount = 0;
151 | let result;
152 |
153 | const prevArray = globalStore.arr;
154 | globalStore.arr.push(22, 11, 33, 77, 44, 55, 66);
155 |
156 | // Confirm that the array is cloned
157 | expect(prevArray).not.toBe(globalStore.arr);
158 |
159 | getByText('Array: 22, 11, 33, 77, 44, 55, 66');
160 | expect(renderCount).toBe(1);
161 |
162 | renderCount = 0;
163 | result = globalStore.arr.sort();
164 | getByText('Array: 11, 22, 33, 44, 55, 66, 77');
165 | expect(result).toEqual([11, 22, 33, 44, 55, 66, 77]);
166 | expect(renderCount).toBe(1);
167 |
168 | renderCount = 0;
169 | result = globalStore.arr.sort((a: number, b: number) => b - a);
170 | getByText('Array: 77, 66, 55, 44, 33, 22, 11');
171 | expect(result).toEqual([77, 66, 55, 44, 33, 22, 11]);
172 | expect(renderCount).toBe(1);
173 |
174 | renderCount = 0;
175 | result = globalStore.arr.reverse();
176 | getByText('Array: 11, 22, 33, 44, 55, 66, 77');
177 | expect(result).toEqual([11, 22, 33, 44, 55, 66, 77]);
178 | expect(renderCount).toBe(1);
179 |
180 | renderCount = 0;
181 | result = globalStore.arr.pop();
182 | getByText('Array: 11, 22, 33, 44, 55, 66');
183 | expect(result).toBe(77);
184 | expect(renderCount).toBe(1);
185 |
186 | renderCount = 0;
187 | result = globalStore.arr.shift();
188 | getByText('Array: 22, 33, 44, 55, 66');
189 | expect(result).toBe(11);
190 | expect(renderCount).toBe(1);
191 |
192 | renderCount = 0;
193 | result = globalStore.arr.splice(0, 2);
194 | getByText('Array: 44, 55, 66');
195 | expect(result).toEqual([22, 33]);
196 | expect(renderCount).toBe(1);
197 |
198 | renderCount = 0;
199 | result = globalStore.arr.unshift(11, 22, 33);
200 | getByText('Array: 11, 22, 33, 44, 55, 66');
201 | expect(result).toBe(6);
202 | expect(renderCount).toBe(1);
203 |
204 | renderCount = 0;
205 | result = globalStore.arr.copyWithin(0, -3, -2);
206 | getByText('Array: 44, 22, 33, 44, 55, 66');
207 | expect(result).toEqual([44, 22, 33, 44, 55, 66]);
208 | expect(renderCount).toBe(1);
209 |
210 | // Here's an invalid copyWithin. It's fine that this updates
211 | renderCount = 0;
212 | result = globalStore.arr.copyWithin(0, 2, 2);
213 | getByText('Array: 44, 22, 33, 44, 55, 66');
214 | expect(result).toEqual([44, 22, 33, 44, 55, 66]);
215 | expect(renderCount).toBe(1);
216 |
217 | renderCount = 0;
218 | result = globalStore.arr.fill(11, 1, 3);
219 | getByText('Array: 44, 11, 11, 44, 55, 66');
220 | expect(result).toEqual([44, 11, 11, 44, 55, 66]);
221 | expect(renderCount).toBe(1);
222 |
223 | renderCount = 0;
224 | globalStore.arr.length = 0;
225 | getByText('Array: none');
226 | expect(result).toEqual([]);
227 | expect(renderCount).toBe(1);
228 | });
229 |
--------------------------------------------------------------------------------
/tests/objectTypes/set.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | afterChange,
4 | initStore,
5 | store as globalStore,
6 | WithStoreProp,
7 | } from '../..';
8 | import * as testUtils from '../testUtils';
9 |
10 | let renderCount: number;
11 |
12 | const handleChange = jest.fn();
13 | afterChange(handleChange);
14 |
15 | beforeEach(() => {
16 | initStore({
17 | mySet: new Set(['one']),
18 | });
19 |
20 | renderCount = 0;
21 | handleChange.mockClear();
22 | });
23 |
24 | it('should operate on a Set', () => {
25 | const { getByText, getByTestId } = testUtils.collectAndRender(
26 | ({ store }: WithStoreProp) => {
27 | renderCount++;
28 |
29 | return (
30 |
31 |
Set() stuff
32 |
Size: {store.mySet.size}
33 |
34 | Has one?: {store.mySet.has('one').toString()}
35 |
36 |
37 |
44 |
45 |
52 |
53 |
54 | Has two?: {store.mySet.has('two').toString()}
55 |
56 |
57 |
64 |
65 |
66 | {Array.from(store.mySet.keys()).join(', ')}
67 |
68 |
69 |
77 |
10 |
{this.props.store.title}
11 |
Button was pressed {this.props.store.clickCount} times
12 |
19 |
{props.store.title}
12 | ));
13 |
14 | getByText('The initial title');
15 |
16 | store.title = 'The updated title';
17 |
18 | getByText('The updated title');
19 | });
20 |
--------------------------------------------------------------------------------
/tests/react/componentDidMount.test.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-classes-per-file */
2 | import React, { Component } from 'react';
3 | import { collect, WithStoreProp } from '../..';
4 | import * as testUtils from '../testUtils';
5 |
6 | const TestComponentBad = collect(
7 | class extends Component {
8 | componentDidMount() {
9 | this.props.store.loading = true;
10 |
11 | setTimeout(() => {
12 | this.props.store.loading = false;
13 | }, 100);
14 | }
15 |
16 | render() {
17 | if (this.props.store.loading) return Loading...
;
18 |
19 | return Loaded
;
20 | }
21 | }
22 | );
23 |
24 | const TestComponentGood = collect(
25 | class extends Component {
26 | componentDidMount() {
27 | setTimeout(() => {
28 | this.props.store.loading = true;
29 |
30 | setTimeout(() => {
31 | this.props.store.loading = false;
32 | }, 100);
33 | });
34 | }
35 |
36 | render() {
37 | if (this.props.store.loading) return Loading...
;
38 |
39 | return Loaded
;
40 | }
41 | }
42 | );
43 |
44 | it('should fail if setting the state during mounting', () => {
45 | testUtils.expectToLogError(() => {
46 | testUtils.renderStrict();
47 | });
48 | });
49 |
50 | it('should set loading state after mounting', async () => {
51 | const { findByText } = testUtils.renderStrict();
52 |
53 | await findByText('Loading...');
54 |
55 | await findByText('Loaded');
56 | });
57 |
--------------------------------------------------------------------------------
/tests/react/componentsInTheStore.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { initStore, WithStoreProp } from '../..';
3 | import * as testUtils from '../testUtils';
4 |
5 | it('should store a component', () => {
6 | initStore({
7 | components: {
8 | Header: (props: any) => {props.title}
,
9 | },
10 | });
11 |
12 | const { getByText } = testUtils.collectAndRenderStrict(
13 | ({ store }: WithStoreProp) => {
14 | const { Header } = store.components;
15 |
16 | return (
17 |
18 |
19 |
20 | );
21 | }
22 | );
23 |
24 | getByText('Page one');
25 | });
26 |
27 | it('will not store a component instance or element', () => {
28 | initStore({
29 | components: {
30 | header: I am a header
,
31 | },
32 | });
33 |
34 | const consoleError = testUtils.expectToLogError(() => {
35 | testUtils.collectAndRenderStrict(({ store }: WithStoreProp) => (
36 | {store.components.header}
37 | ));
38 | });
39 |
40 | // I don't know why exactly, but it seems that React sets 'validated'
41 | expect(consoleError[0]).toMatch(
42 | `You are attempting to modify the store during a render cycle. (You're setting "validated" to "true" somewhere)`
43 | );
44 | });
45 |
--------------------------------------------------------------------------------
/tests/react/forwardRefClass.test.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-classes-per-file */
2 | import React, { Component } from 'react';
3 | import { collect, WithStoreProp } from '../..';
4 | import * as testUtils from '../testUtils';
5 |
6 | interface Props extends WithStoreProp {
7 | defaultValue: string;
8 | inputRef: React.Ref;
9 | }
10 |
11 | class RawCleverInput extends React.PureComponent {
12 | render() {
13 | const { props } = this;
14 | return (
15 |
19 | );
20 | }
21 | }
22 |
23 | const CleverInput = collect(RawCleverInput);
24 |
25 | class ComponentWithRef extends Component {
26 | inputRef = React.createRef();
27 |
28 | render() {
29 | return (
30 |
31 |
40 |
41 |
42 |
43 | );
44 | }
45 | }
46 |
47 | const { getByText, getByLabelText } = testUtils.renderStrict(
48 |
49 | );
50 |
51 | it('should empty the input when the button is clicked', () => {
52 | const getInputByLabelText = (text: string) =>
53 | getByLabelText(text) as HTMLInputElement;
54 |
55 | expect(getInputByLabelText('The input').value).toBe('some text');
56 | getInputByLabelText('The input').value = 'some different text';
57 | expect(getInputByLabelText('The input').value).toBe('some different text');
58 |
59 | getByText('Empty the input').click();
60 |
61 | expect(getInputByLabelText('The input').value).toBe('X');
62 | });
63 |
--------------------------------------------------------------------------------
/tests/react/forwardRefFc.test.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { collect, WithStoreProp } from '../..';
3 | import * as testUtils from '../testUtils';
4 |
5 | type Props = WithStoreProp & {
6 | defaultValue: string;
7 | inputRef: React.Ref;
8 | };
9 |
10 | const CollectedWithRef = collect((props: Props) => (
11 |
15 | ));
16 |
17 | class ComponentWithRef extends Component {
18 | inputRef = React.createRef();
19 |
20 | render() {
21 | return (
22 |
23 |
30 |
31 |
32 |
33 | );
34 | }
35 | }
36 |
37 | const { getByText, getByLabelText } = testUtils.renderStrict(
38 |
39 | );
40 |
41 | const getInputByLabelText = (text: string) =>
42 | getByLabelText(text) as HTMLInputElement;
43 |
44 | it('should empty the input when the button is clicked', () => {
45 | expect(getInputByLabelText('The input').value).toBe('some text');
46 | getInputByLabelText('The input').value = 'some different text';
47 | expect(getInputByLabelText('The input').value).toBe('some different text');
48 |
49 | getByText('Empty the input').click();
50 |
51 | expect(getInputByLabelText('The input').value).toBe('X');
52 | });
53 |
--------------------------------------------------------------------------------
/tests/react/hooks.test.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useLayoutEffect, useState } from 'react';
2 | import { waitFor, act } from '@testing-library/react';
3 | import { store as globalStore, WithStoreProp } from '../..';
4 | import * as testUtils from '../testUtils';
5 |
6 | it('should work with useState hook', () => {
7 | globalStore.counter = 0;
8 |
9 | const { getByText } = testUtils.collectAndRenderStrict(
10 | ({ store }: WithStoreProp) => {
11 | const [counter, setCounter] = useState(0);
12 |
13 | return (
14 |
15 |
{`State count: ${counter}`}
16 |
17 |
{`Store count: ${store.counter}`}
18 |
19 |
26 |
27 |
34 |
68 |
{`Store count: ${store.counter}`}
69 |
70 |
77 |
{store.loaded ? 'Loaded' : 'Loading...'}
;
110 | }
111 | );
112 |
113 | // Interesting. React 'defers' the useEffect(), but it happens in the same
114 | // tick. So by the time this line runs, the component has already rendered
115 | // twice and store.loaded is true;
116 | getByText('Loaded');
117 | expect(renderCount).toBe(2);
118 | });
119 |
120 | it('changing store in useLayoutEffect should error', async () => {
121 | globalStore.loaded = false;
122 |
123 | testUtils.expectToLogError(() => {
124 | testUtils.collectAndRenderStrict(({ store }: WithStoreProp) => {
125 | useLayoutEffect(() => {
126 | // Oh no, useLayoutEffect is synchronous, so will fire during render
127 | store.loaded = true;
128 | }, []);
129 |
130 | return {store.loaded ? 'Loading...' : 'Loading'}
;
131 | });
132 | });
133 | });
134 |
--------------------------------------------------------------------------------
/tests/react/propTypes.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { initStore, PropTypes } from '../..';
3 | import * as testUtils from '../testUtils';
4 |
5 | it('should not listen to props read from prop types', () => {
6 | initStore({
7 | prop1: 'This is prop1',
8 | prop2: 'This is prop2',
9 | prop3: 'This is prop3',
10 | });
11 |
12 | const MyComponent = ({ store }: any) => (
13 |
14 |
{store.prop1}
15 |
{store.prop2}
16 |
Comp1 count: {store.count}
;
14 | });
15 |
16 | const Comp2 = collect(({ store }: WithStoreProp) => {
17 | comp2RenderCount++;
18 |
19 | return Comp2 count: {store.count}
;
20 | });
21 |
22 | const ParentComponent = () => {
23 | parentCompRenderCount++;
24 | return (
25 |
26 |
27 |
28 |
29 | );
30 | };
31 |
32 | it('should batch synchronous updates to the store', async () => {
33 | const { getByText } = render();
34 |
35 | expect(parentCompRenderCount).toBe(1);
36 | expect(comp1RenderCount).toBe(1);
37 | expect(comp2RenderCount).toBe(1);
38 | expect(getByText(/Comp1 count:/)).toHaveTextContent('Comp1 count: 1');
39 | expect(getByText(/Comp2 count:/)).toHaveTextContent('Comp2 count: 1');
40 |
41 | globalStore.count++;
42 |
43 | expect(parentCompRenderCount).toBe(1); // shouldn't re-render
44 | expect(comp1RenderCount).toBe(2);
45 | expect(comp2RenderCount).toBe(2);
46 | expect(getByText(/Comp1 count:/)).toHaveTextContent('Comp1 count: 2');
47 | expect(getByText(/Comp2 count:/)).toHaveTextContent('Comp2 count: 2');
48 |
49 | globalStore.count++;
50 | globalStore.count++;
51 |
52 | expect(parentCompRenderCount).toBe(1);
53 | expect(comp1RenderCount).toBe(4);
54 | expect(comp2RenderCount).toBe(4);
55 | expect(getByText(/Comp1 count:/)).toHaveTextContent('Comp1 count: 4');
56 | expect(getByText(/Comp2 count:/)).toHaveTextContent('Comp2 count: 4');
57 |
58 | batch(() => {
59 | globalStore.count++;
60 | globalStore.count++;
61 | globalStore.count++;
62 | globalStore.count++;
63 | globalStore.count++;
64 | globalStore.count++;
65 | });
66 |
67 | expect(parentCompRenderCount).toBe(1);
68 |
69 | // Of note: the render count is only 5 ...
70 | expect(comp1RenderCount).toBe(5);
71 | expect(comp2RenderCount).toBe(5);
72 |
73 | // But the count correctly shows 10
74 | expect(getByText(/Comp1 count:/)).toHaveTextContent('Comp1 count: 10');
75 | expect(getByText(/Comp2 count:/)).toHaveTextContent('Comp2 count: 10');
76 | });
77 |
--------------------------------------------------------------------------------
/tests/unit/debug.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { initStore, collect, WithStoreProp } from '../..';
3 | import * as testUtils from '../testUtils';
4 |
5 | it('should do the right thing', () => {
6 | initStore({
7 | prop1: 'Prop 1',
8 | prop2: 'Prop 2',
9 | tasks: [
10 | {
11 | id: 0,
12 | name: 'Task 0',
13 | },
14 | {
15 | id: 1,
16 | name: 'Task 1',
17 | },
18 | ],
19 | });
20 |
21 | type TaskProps = WithStoreProp & {
22 | taskId: number;
23 | };
24 |
25 | const Task = ({ store, taskId }: TaskProps) => {
26 | if (!store.tasks) return null;
27 |
28 | const task = store.tasks.find(({ id }) => id === taskId);
29 |
30 | if (!task) return null;
31 |
32 | return (
33 |
34 |
{store.prop2}
35 |
{task.name}
36 |
44 |
{store.prop1}
45 |
46 | {store.tasks &&
47 | store.tasks.map((task) => (
48 |
49 | ))}
50 |
Hi
;
15 | }
16 | }
17 |
18 | ClassWithStaticRaw.returnDogs = () => 'dogs';
19 |
20 | const ClassWithStatic = collect(ClassWithStaticRaw);
21 |
22 | expect(ClassWithStatic.returnCats()).toBe('cats');
23 | expect(ClassWithStatic.returnDogs()).toBe('dogs');
24 | });
25 |
26 | it('for a function component', () => {
27 | const FuncWithStaticRaw = () => Hi
;
28 |
29 | FuncWithStaticRaw.returnDogs = () => 'dogs';
30 |
31 | const ClassWithStatic = collect(FuncWithStaticRaw);
32 |
33 | expect(ClassWithStatic.returnDogs()).toBe('dogs');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/tests/unit/propTypes.test.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import React from 'react';
3 | import { PropTypes, initStore } from '../..';
4 | import * as testUtils from '../testUtils';
5 |
6 | it('should identify prop type mismatch for function components', () => {
7 | const MyComponent = (props) => {
8 | return {props.prop1}
;
9 | };
10 |
11 | MyComponent.propTypes = {
12 | prop1: PropTypes.number.isRequired,
13 | };
14 |
15 | const errorMessage = testUtils.expectToLogError(() => {
16 | testUtils.renderStrict();
17 | });
18 |
19 | expect(errorMessage).toMatch(
20 | 'Warning: Failed prop type: Invalid prop `prop1` of type `string` supplied to `MyComponent`, expected `number`.'
21 | );
22 | });
23 |
24 | it('should identify missing prop type for function components', () => {
25 | const MyFunctionComponent = (props) => {
26 | return {props.prop1}
;
27 | };
28 |
29 | MyFunctionComponent.propTypes = {
30 | prop1: PropTypes.string.isRequired,
31 | // eslint-disable-next-line react/no-unused-prop-types
32 | prop2: PropTypes.number.isRequired,
33 | };
34 |
35 | const errorMessage = testUtils.expectToLogError(() => {
36 | testUtils.renderStrict();
37 | });
38 |
39 | expect(errorMessage).toMatch(
40 | 'Warning: Failed prop type: The prop `prop2` is marked as required in `MyFunctionComponent`, but its value is `undefined`'
41 | );
42 | });
43 |
44 | it('should identify prop type errors for classes', () => {
45 | // eslint-disable-next-line react/prefer-stateless-function
46 | class MyClassComponent extends React.Component {
47 | static propTypes = {
48 | prop1: PropTypes.number.isRequired,
49 | };
50 |
51 | render() {
52 | return {this.props.prop1}
;
53 | }
54 | }
55 |
56 | const errorMessage = testUtils.expectToLogError(() => {
57 | const { getByText } = testUtils.renderStrict(
58 |
59 | );
60 |
61 | // This should log an error, but still render correctly.
62 | getByText('a string');
63 | });
64 |
65 | expect(errorMessage).toMatch(
66 | 'Warning: Failed prop type: Invalid prop `prop1` of type `string` supplied to `MyClassComponent`, expected `number`.'
67 | );
68 | });
69 |
70 | it('should pass all valid prop types', () => {
71 | // This is really testing the implementation of the `prop-types` library,
72 | // but since it's quite conceivable that wrapping it in a proxy could break
73 | // it, we do it anyway.
74 | const MyComponent = (props) => {
75 | return {props.store.readByChild}
;
76 | };
77 |
78 | const MyOtherComponent = () => Foo
;
79 |
80 | const MyCollectedComponent = (props) => {
81 | return (
82 |
83 |
{props.store.readByParent}
84 |
85 |
86 | );
87 | };
88 |
89 | initStore({
90 | readByParent: 'Read By Parent',
91 | readByChild: 'Read By Child',
92 | testAny: 'Any',
93 | testArray: ['array'],
94 | testBool: true,
95 | testFunc: () => {},
96 | testNumber: 77,
97 | testObject: { foo: 'bar' },
98 | testString: 'string',
99 | testNode: Hello
,
100 | testElement: Hello
,
101 | testSymbol: Symbol('foo'),
102 | testElementType: MyOtherComponent,
103 | testInstanceOfMap: new Map([['foo', 'bar']]),
104 | testOneOf: 'foo',
105 | testOneOfType: ['an array'],
106 | testArrayOf: [1, 2, 3],
107 | testObjectOf: { foo: 1234 },
108 | testShape: {
109 | fooShape: 'bar',
110 | bazShape: 'Luhrmann',
111 | extra: 'fine',
112 | },
113 | testExact: {
114 | fooExact: 'bar',
115 | bazExact: 'Luhrmann',
116 | },
117 | });
118 |
119 | /* eslint-disable */
120 | MyComponent.propTypes = {
121 | store: PropTypes.shape({
122 | readByParent: PropTypes.string.isRequired,
123 | readByChild: PropTypes.string.isRequired,
124 |
125 | // One for each prop type
126 | testAny: PropTypes.any.isRequired,
127 | testAny: PropTypes.any.isRequired,
128 | testArray: PropTypes.array.isRequired,
129 | testBool: PropTypes.bool.isRequired,
130 | testFunc: PropTypes.func.isRequired,
131 | testNumber: PropTypes.number.isRequired,
132 | testObject: PropTypes.object.isRequired,
133 | testString: PropTypes.string.isRequired,
134 | testNode: PropTypes.node.isRequired,
135 | testElement: PropTypes.element.isRequired,
136 | testSymbol: PropTypes.symbol.isRequired,
137 | testElementType: PropTypes.elementType.isRequired,
138 | testInstanceOfMap: PropTypes.instanceOf(Map).isRequired,
139 | testOneOf: PropTypes.oneOf(['foo']).isRequired,
140 | testOneOfType: PropTypes.oneOfType([PropTypes.array]).isRequired,
141 | testArrayOf: PropTypes.arrayOf(PropTypes.number).isRequired,
142 | testObjectOf: PropTypes.objectOf(PropTypes.number).isRequired,
143 | testShape: PropTypes.shape({
144 | fooShape: PropTypes.string.isRequired,
145 | bazShape: PropTypes.string.isRequired,
146 | }).isRequired,
147 | testExact: PropTypes.exact({
148 | fooExact: PropTypes.string.isRequired,
149 | bazExact: PropTypes.string.isRequired,
150 | }).isRequired,
151 | }),
152 | };
153 | /* eslint-enable */
154 |
155 | const { getByText } = testUtils.collectAndRenderStrict(MyCollectedComponent);
156 | getByText('Read By Parent');
157 | getByText('Read By Child');
158 |
159 | expect(testUtils.getAllListeners()).toEqual(['readByParent', 'readByChild']);
160 | });
161 |
--------------------------------------------------------------------------------
/tests/unit/useProps.test.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import {
3 | initStore,
4 | store as globalStore,
5 | useProps,
6 | WithStoreProp,
7 | } from '../..';
8 | import * as testUtils from '../testUtils';
9 |
10 | beforeEach(() => {
11 | initStore({
12 | prop1: 'This is prop1',
13 | prop2: 'This is prop2',
14 | });
15 | });
16 |
17 | it('should listen to props', () => {
18 | testUtils.collectAndRender(({ store }: any) => {
19 | useProps([store.prop1]);
20 |
21 | return {store.prop2}
;
22 | });
23 |
24 | expect(testUtils.getAllListeners()).toEqual(['prop1', 'prop2']);
25 | });
26 |
27 | it('should listen to object children', () => {
28 | globalStore.arr = [{ name: 'Task one' }, { name: 'Task two' }];
29 | globalStore.obj = {
30 | one: 'one!',
31 | two: 'two!',
32 | };
33 |
34 | testUtils.collectAndRender(({ store }: any) => {
35 | useProps([store.prop1, ...store.arr]);
36 |
37 | // A terrible idea, but works
38 | useProps(Object.values(store.obj));
39 |
40 | return {store.prop2}
;
41 | });
42 |
43 | expect(testUtils.getAllListeners()).toEqual([
44 | 'prop1',
45 | 'arr',
46 | 'arr.0',
47 | 'arr.1',
48 | 'obj',
49 | 'obj.one',
50 | 'obj.two',
51 | 'prop2',
52 | ]);
53 | });
54 |
55 | it('should work inline', () => {
56 | const { container } = testUtils.collectAndRender(({ store }: any) => (
57 |
58 | {useProps([store.prop1])}
59 |
60 |
{store.prop2}
61 |
91 | {!store.loaded &&
Loading...
}
92 |
93 |
{store.prop2}
94 |
{store.prop2}
;
115 | });
116 |
117 | expect(testUtils.getAllListeners()).toEqual(['prop1', 'prop2']);
118 | });
119 |
120 | it('can be used multiple times', () => {
121 | testUtils.collectAndRender(({ store }: any) => {
122 | useProps([store.prop1]);
123 | useProps([store.prop3]);
124 | useProps([store.prop4]);
125 |
126 | return {store.prop2}
;
127 | });
128 |
129 | expect(testUtils.getAllListeners()).toEqual([
130 | 'prop1',
131 | 'prop3',
132 | 'prop4', // doesn't exist, doesn't matter
133 | 'prop2',
134 | ]);
135 | });
136 |
137 | it('can be read in lifecycle methods', () => {
138 | // These work, but aren't a good idea. Maybe one day this will be a warning.
139 | testUtils.collectAndRender(
140 | class MyComponent extends React.Component {
141 | state = {};
142 |
143 | componentDidMount() {
144 | useProps([this.props.store.componentDidMountProp]);
145 | }
146 |
147 | static getDerivedStateFromProps(props: Readonly) {
148 | useProps([props.store.getDerivedStateFromPropsProp]);
149 | return null;
150 | }
151 |
152 | render() {
153 | const { store } = this.props;
154 | useProps([store.prop1]);
155 |
156 | return {store.prop2}
;
157 | }
158 | }
159 | );
160 |
161 | expect(testUtils.getAllListeners()).toEqual([
162 | 'getDerivedStateFromPropsProp',
163 | 'prop1',
164 | 'prop2',
165 | 'componentDidMountProp',
166 | ]);
167 | });
168 |
169 | it('should work with changing state', () => {
170 | type Props = WithStoreProp & {
171 | hiddenMessage: string;
172 | };
173 |
174 | const { queryByText, getByText } = testUtils.collectAndRenderStrict(
175 | ({ store }: Props) => {
176 | const [showHiddenMessage, setShowHiddenMessage] = useState(false);
177 |
178 | useProps([store.hiddenMessage]);
179 |
180 | return (
181 |
182 | {showHiddenMessage &&
{store.hiddenMessage}
}
183 |
184 |
191 |