test(connectObservable): add test combining ErrorBoundary and Suspense #53
Conversation
Codecov Report
@@ Coverage Diff @@
## main #53 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 18 18
Lines 216 223 +7
Branches 23 24 +1
=========================================
+ Hits 216 223 +7
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
I've found a posible fix that seems to work, and doesn't break any of the other tests, but I can't say I'm proud of it. Again, happy to drop it in favour of a better fix.
It feels like React is not really polished on this end...
Plus... it really doesn't work for connectFactoryObservable
| if (hasError) { | ||
| throw error | ||
| } |
There was a problem hiding this comment.
I compared with the way that this is solved in React's example and within their read (our getValue() equivalent) they either return the value, throw the promise, or throw the error.
| .pipe( | ||
| takeUntil(race(onSubscribe, of(true).pipe(delay(60000)))), | ||
| catchError(() => of(true)), | ||
| ) | ||
| .subscribe() |
There was a problem hiding this comment.
This was needed because otherwise this subscription would receive an error without handling it - Raising an uncaught exception that jest would pick up as error even if (expect(true).toBe(true)).
| await componentAct(async () => { | ||
| await wait(0) | ||
| }) |
There was a problem hiding this comment.
Ewww.
I couldn't find any doc on this, but by experimenting, it seems that when a thrown promise fails in Suspense:
- It creates a new component instance. Yep, the reducer
initfunction gets called, and if you have asetState(() => Math.random())you'll get another value. - It retries rendering the component a couple of times.
It looks like the single componentAct can't pick this up. Chaining two toghether does fix it.
Do you smell that smelly smell?
|
Closing this in favour of #54 |
I've found this issue where if a stream throws an error before emitting any value, the error can't be caught in an ErrorBoundary.
I've made this test that describes the issue and fails with the current version. A codesandbox can be found here
For reference, react uses this sandbox to show how the error is caught also in data fetching. I had a quick look and I think that they have it working because the component throws an error if the promise rejected.