forked from reduxjs/react-redux
/
connectAdvanced.spec.js
183 lines (145 loc) · 4.59 KB
/
connectAdvanced.spec.js
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
import React, { Component } from 'react'
import * as rtl from 'react-testing-library'
import { Provider as ProviderMock, connectAdvanced } from '../../src/index.js'
import { createStore } from 'redux'
import 'jest-dom/extend-expect'
describe('React', () => {
describe('connectAdvanced', () => {
it('should map state and render once on mount', () => {
const initialState = {
foo: 'bar'
}
let mapCount = 0
let renderCount = 0
const store = createStore(() => initialState)
function Inner(props) {
renderCount++
return <div data-testid="foo">{JSON.stringify(props)}</div>
}
const Container = connectAdvanced(() => {
return state => {
mapCount++
return state
}
})(Inner)
const tester = rtl.render(
<ProviderMock store={store}>
<Container />
</ProviderMock>
)
expect(tester.getByTestId('foo')).toHaveTextContent('bar')
expect(mapCount).toEqual(1)
expect(renderCount).toEqual(1)
})
it('should render on reference change', () => {
let mapCount = 0
let renderCount = 0
// force new reference on each dispatch
const store = createStore(() => ({
foo: 'bar'
}))
function Inner(props) {
renderCount++
return <div data-testid="foo">{JSON.stringify(props)}</div>
}
const Container = connectAdvanced(() => {
return state => {
mapCount++
return state
}
})(Inner)
rtl.render(
<ProviderMock store={store}>
<Container />
</ProviderMock>
)
store.dispatch({ type: 'NEW_REFERENCE' })
// Should have mapped the state on mount and on the dispatch
expect(mapCount).toEqual(2)
// Should have rendered on mount and after the dispatch bacause the map
// state returned new reference
expect(renderCount).toEqual(2)
})
it('should not render when the returned reference does not change', () => {
const staticReference = {
foo: 'bar'
}
let mapCount = 0
let renderCount = 0
// force new reference on each dispatch
const store = createStore(() => ({
foo: 'bar'
}))
function Inner(props) {
renderCount++
return <div data-testid="foo">{JSON.stringify(props)}</div>
}
const Container = connectAdvanced(() => {
return () => {
mapCount++
// but return static reference
return staticReference
}
})(Inner)
const tester = rtl.render(
<ProviderMock store={store}>
<Container />
</ProviderMock>
)
store.dispatch({ type: 'NEW_REFERENCE' })
expect(tester.getByTestId('foo')).toHaveTextContent('bar')
// The state should have been mapped twice: on mount and on the dispatch
expect(mapCount).toEqual(2)
// But the render should have been called only on mount since the map state
// did not return a new reference
expect(renderCount).toEqual(1)
})
it('should map state on own props change but not render when the reference does not change', () => {
const staticReference = {
foo: 'bar'
}
let mapCount = 0
let renderCount = 0
const store = createStore(() => staticReference)
function Inner(props) {
renderCount++
return <div data-testid="foo">{JSON.stringify(props)}</div>
}
const Container = connectAdvanced(() => {
return () => {
mapCount++
// return the static reference
return staticReference
}
})(Inner)
class OuterComponent extends Component {
constructor() {
super()
this.state = { foo: 'FOO' }
}
setFoo(foo) {
this.setState({ foo })
}
render() {
return (
<div>
<Container {...this.state} />
</div>
)
}
}
let outerComponent
rtl.render(
<ProviderMock store={store}>
<OuterComponent ref={c => (outerComponent = c)} />
</ProviderMock>
)
outerComponent.setFoo('BAR')
// map on mount and on prop change
expect(mapCount).toEqual(2)
// render only on mount but skip on prop change because no new
// reference was returned
expect(renderCount).toEqual(1)
})
})
})