TestRenderer warns if flushThrough is passed the wrong params (#12909)
TestRenderer throws if flushThrough is passed the expected yield values that don't match actual yield values.
Brian Vaughn committed
May 25, 2018 at 14:53 UTC
f35d989bea2ee38c164c0cbb23cd300552e998f9
2 files changed
+76
-3
packages/react-test-renderer/src/ReactTestRendererScheduling.js
+16
-1
@@ -80,7 +80,22 @@ export function flushThrough(expectedValues: Array<mixed>): Array<mixed> {
80
}
81
if (yieldedValues === null) {
82
// Always return an array.
83
- return [];
83
+ yieldedValues = [];
84
+ }
85
+ for (let i = 0; i < expectedValues.length; i++) {
86
+ const expectedValue = `"${(expectedValues[i]: any)}"`;
87
+ const yieldedValue =
88
+ i < yieldedValues.length ? `"${(yieldedValues[i]: any)}"` : 'nothing';
89
+ if (yieldedValue !== expectedValue) {
90
+ const error = new Error(
91
+ `flushThrough expected to yield ${(expectedValue: any)}, but ${(yieldedValue: any)} was yielded`,
92
+ );
93
+ // Attach expected and yielded arrays,
94
+ // So the caller could pretty print the diff (if desired).
95
+ (error: any).expectedValues = expectedValues;
96
+ (error: any).actualValues = yieldedValues;
97
+ throw error;
98
+ }
99
}
100
return yieldedValues;
101
}
packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
+60
-2
@@ -10,10 +10,16 @@
10
11
'use strict';
12
13
-const React = require('react');
14
-const ReactTestRenderer = require('react-test-renderer');
13
+let React;
14
+let ReactTestRenderer;
15
16
describe('ReactTestRendererAsync', () => {
17
+ beforeEach(() => {
18
+ jest.resetModules();
19
+ React = require('react');
20
+ ReactTestRenderer = require('react-test-renderer');
21
+ });
22
+
23
it('flushAll flushes all work', () => {
24
function Foo(props) {
25
return props.children;
@@ -134,4 +140,56 @@ describe('ReactTestRendererAsync', () => {
140
// Only the higher priority properties have been committed
141
expect(renderer.toJSON()).toEqual(['A:2', 'B:2']);
142
});
143
+
144
+ it('should error if flushThrough params dont match yielded values', () => {
145
+ const Yield = ({id}) => {
146
+ renderer.unstable_yield(id);
147
+ return id;
148
+ };
149
+
150
+ const renderer = ReactTestRenderer.create(
151
+ <div>
152
+ <Yield id="foo" />
153
+ <Yield id="bar" />
154
+ <Yield id="baz" />
155
+ </div>,
156
+ {
157
+ unstable_isAsync: true,
158
+ },
159
+ );
160
+
161
+ expect(() => renderer.unstable_flushThrough(['foo', 'baz'])).toThrow(
162
+ 'flushThrough expected to yield "baz", but "bar" was yielded',
163
+ );
164
+ });
165
+
166
+ it('should error if flushThrough yields the wrong number of values', () => {
167
+ const Yield = ({id}) => {
168
+ renderer.unstable_yield(id);
169
+ return id;
170
+ };
171
+
172
+ const renderer = ReactTestRenderer.create(
173
+ <div>
174
+ <Yield id="foo" />
175
+ </div>,
176
+ {
177
+ unstable_isAsync: true,
178
+ },
179
+ );
180
+
181
+ expect(() => renderer.unstable_flushThrough(['foo', 'bar'])).toThrow(
182
+ 'flushThrough expected to yield "bar", but nothing was yielded',
183
+ );
184
+ });
185
+
186
+ it('should error if flushThrough yields no values', () => {
187
+ const renderer = ReactTestRenderer.create(null, {
188
+ unstable_isAsync: true,
189
+ });
190
+
191
+ expect(() => renderer.unstable_flushThrough(['foo'])).toThrow(
192
+ 'flushThrough expected to yield "foo", but nothing was yielded',
193
+ );
194
+ });
195
});