bug: stencil, proxyCustomElement causing loops with pretty format plugin

[MrHus]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

I'm using React 18 in combination with @testing-library/react and @ionic/react-test-utils, and I'm getting the following error: PrettyFormatPluginError: Invalid string length.

When an assertion fails, @testing-library/react will attempt to render the screen. It does so by calling a library called pretty-format with a custom formatter, whose job it is to render the current screen in a human readable way.

For some reason ionic puts this mechanism in an infinite loop,

If you manually change the printObjectProperties function at node_modules/pretty-format/build/collections.js and add some logs, you can see how many times it is called.

Also when calling screen.debug() you see the same behaviour.

Expected Behavior

You expect the "screen" to be able to render when using @testing-library/react.

This did not happen in previous versions.

Steps to Reproduce

In the reproduction repo.

Run npm install Run npm test

Focus the tests on the "blaat.test.tsx` file.

After waiting a long time it should print the error, for me it is about 120 seconds.

Code Reproduction URL

https://github.com/MrHus/ionic-react-test-fail

Ionic Info

Ionic:

Ionic CLI : 6.19.1 (/Users/redacted/.nvm/versions/node/v16.15.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.1.6

Capacitor:

Capacitor CLI : 3.5.1 @capacitor/android : 3.5.1 @capacitor/core : 3.5.1 @capacitor/ios : 3.5.1

Utility:

cordova-res : not installed globally native-run : 1.6.0

System:

NodeJS : v16.15.0 (/Users/redacted/.nvm/versions/node/v16.15.0/bin/node) npm : 8.5.5 OS : macOS Big Sur

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Can you debug this a bit more? I can reproduce this behavior, but I am not able to determine if Ionic is responsible for it. I can reproduce this using the following render code:

<IonReactRouter>
  <IonRouterOutlet></IonRouterOutlet>
 </IonReactRouter>

It is possible that there is a bug in these components, or it could be that these components trigger a bug in underlying app dependency.

[MrHus]

Note that rendering the following:

render(<IonBadge color="primary">Hello world!</IonBadge>)

Also gives a strange result:

Click to expand!

```

Object { "__reactFiber$i1nwtx4a2xk": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": Object { "columnNumber": 12, "fileName": "/Users/maartenhus/Projects/ionic-test/blaatje/src/blaat.test.tsx", "lineNumber": 51, }, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": [Circular], "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 0, "index": 0, "key": null, "lanes": 16, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 0, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "lastBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1024, "index": 0, "key": null, "lanes": 0, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 6291975, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": null, "subtreeFlags": 6291973, "tag": 11, "treeBaseDuration": 0, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "updateQueue": null, }, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Function], "flags": 4194309, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": Object { "columnNumber": 12, "fileName": "/Users/maartenhus/Projects/ionic-test/blaatje/src/blaat.test.tsx", "lineNumber": 51, }, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": [Circular], "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 0, "index": 0, "key": null, "lanes": 16, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 0, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "lastBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1024, "index": 0, "key": null, "lanes": 0, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 6291975, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": null, "subtreeFlags": 6291973, "tag": 11, "treeBaseDuration": 0, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "updateQueue": null, }, "selfBaseDuration": 0, "sibling": null, "stateNode": ReactComponent { "_reactInternalInstance": Object {}, "_reactInternals": [Circular], "componentEl": [Circular], "context": Object {}, "props": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "refs": Object {}, "setComponentElRef": [Function], "state": null, "updater": Object { "enqueueForceUpdate": [Function], "enqueueReplaceState": [Function], "enqueueSetState": [Function], "isMounted": [Function], }, }, "subtreeFlags": 2097664, "tag": 1, "treeBaseDuration": 0, "type": [Function], "updateQueue": Object { "baseState": null, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "ion-badge", "flags": 2097664, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", "style": undefined, }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", "style": undefined, }, "ref": [Function], "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": Object { "columnNumber": 12, "fileName": "/Users/maartenhus/Projects/ionic-test/blaatje/src/blaat.test.tsx", "lineNumber": 51, }, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": [Circular], "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 0, "index": 0, "key": null, "lanes": 16, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 0, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "lastBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1024, "index": 0, "key": null, "lanes": 0, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 6291975, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": null, "subtreeFlags": 6291973, "tag": 11, "treeBaseDuration": 0, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "updateQueue": null, }, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Function], "flags": 4194309, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": Object { "columnNumber": 12, "fileName": "/Users/maartenhus/Projects/ionic-test/blaatje/src/blaat.test.tsx", "lineNumber": 51, }, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": [Circular], "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 0, "index": 0, "key": null, "lanes": 16, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 0, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "lastBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1024, "index": 0, "key": null, "lanes": 0, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 6291975, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": null, "subtreeFlags": 6291973, "tag": 11, "treeBaseDuration": 0, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "updateQueue": null, }, "selfBaseDuration": 0, "sibling": null, "stateNode": ReactComponent { "_reactInternalInstance": Object {}, "_reactInternals": [Circular], "componentEl": [Circular], "context": Object {}, "props": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "refs": Object {}, "setComponentElRef": [Function], "state": null, "updater": Object { "enqueueForceUpdate": [Function], "enqueueReplaceState": [Function], "enqueueSetState": [Function], "isMounted": [Function], }, }, "subtreeFlags": 2097664, "tag": 1, "treeBaseDuration": 0, "type": [Function], "updateQueue": Object { "baseState": null, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": [Circular], "subtreeFlags": 0, "tag": 5, "treeBaseDuration": 0, "type": "ion-badge", "updateQueue": null, }, "__reactProps$i1nwtx4a2xk": Object { "children": "Hello world!", "color": "primary", "style": undefined, }, Symbol(SameObject caches): Object { "childNodes": NodeList [ Hello world!, ], "classList": DOMTokenList { "0": "ion-color", "1": "ion-color-primary", "2": "md", }, "style": CSSStyleDeclaration { "_importants": Object {}, "_length": 0, "_onChange": [Function], "_values": Object {}, }, }, }

```

Perhaps it is something very basic in Ionic, does Ionic support React 18?

[liamdebeasi]

Ionic React does support React 18.

I recommend digging into what's calling printObjectProperties.

It looks like printComplexValue calls printObjectProperties. However, both printComplexValue and printObjectProperties call printer. The printer function can also call printComplexValue, so it looks like there is a case where infinite recursion can happen.

[MrHus]

There is a function called createReactComponent inside Ionic React, it does the following:

            /**
             * We use createElement here instead of
             * React.createElement to work around a
             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
             * React.createElement causes all elements to be rendered
             * as <tagname> instead of the actual Web Component.
             */
            return React.createElement(tagName, newProps, children);

If you read the comment it says it does not want to use React.createElement but it does.

Here is the original source file:

https://github.com/ionic-team/ionic-framework/blob/main/packages/react/src/components/react-component-lib/createComponent.tsx

It does not use React.createElement, but createElement, so somehow the build causes this to use it.

If I change the line:

return React.createElement(tagName, newProps, children);

to:

return React.createElement(displayName, newProps, children);

Then my test shows:

   <body>
      <div>
        <ionbadge
          color="primary"
        >
          Hello world!
        </ionbadge>
      </div>
    </body

So this change makes it display inside react-testing-library correctly.

It also works when starting the app via npm start although the CSS does not seem to load for some reason.

[MrHus]

Downgrading to https://github.com/ionic-team/ionic-framework/releases/tag/v6.0.1 causes the problem to go away.

This is because this version lies before this change / pull request:

https://github.com/ionic-team/ionic-framework/pull/24515

Which was created because of this issue:

https://github.com/ionic-team/ionic-framework/issues/24229

I wonder if this cannot be reverted because the root cause has been fixed:

https://github.com/vitejs/vite/issues/6104

For completions sake the output is now:

   <body>
      <div>
        <ion-badge
          class="ion-color ion-color-primary md"
          color="primary"
        >
          Hello world!
        </ion-badge>
      </div>
    </body>

Note that the name is now ion-badge instead of ionbadge with my attempt.

[liamdebeasi]

The issue appears to be related to a function called proxyCustomElement provided by Stencil, not the createElement change (though this function did change in 6.0.2). While there does not seem to be a bug in Ionic Framework, there may be an issue in Stencil.

I will take a closer look and follow up here when I have more to share.

[khfy6hzy]

Hey there, is there an update on this issue? We are also bitten by this issue when upgrading to @stencilc/core v2.14.1 which introduced the proxyCustomElement function.

[liamdebeasi]

Were you able to reproduce the issue outside of Ionic? (I.e. in a blank Stencil app) That would help us isolate and fix the issue quicker.

[vincenthongzy]

Were you able to reproduce the issue outside of Ionic? (I.e. in a blank Stencil app) That would help us isolate and fix the issue quicker.

I was able to reproduce using a React app bootstrapped from CRA https://github.com/vincenthongzy/stencil-repro. Please let me know if you require more details. I have exported a simple component, <MyComponent> from Stencil's React bindings and the screen.debug() output is unexpected.

The above screenshot is from rendering a single <MyComponent>. Trying to render more than 2 <MyComponent> will cause the PrettyFormatPluginError: Invalid string length to occur.

After downgrading to @stencil/[email protected] , screen.debug() provides the expected output:

    <body>
      <div>
        <div
          class="App"
        >
          <header
            class="App-header"
          >
            <img
              alt="logo"
              class="App-logo"
              src="logo.svg"
            />
            <p>
              Edit 
              <code>
                src/App.js
              </code>
               and save to reload.
            </p>
            <my-component
              first="hong"
            />
            <my-component
              first="hong"
            />
            <my-component
              first="hong"
            />
            <a
              class="App-link"
              href="https://reactjs.org"
              rel="noopener noreferrer"
              target="_blank"
            >
              Learn React
            </a>
          </header>
        </div>
      </div>
    </body>

[liamdebeasi]

Thanks! I forwarded the repo to the Stencil team who is going to investigate further: https://github.com/ionic-team/stencil/issues/3434.

[h-sakano]

Is there any update to this Issue? I have not been able to update from 6.0.10 because unit tests with react-testing-library are not succeeding.

[vincenthongzy]

@h-sakano you can check my reply here https://github.com/ionic-team/stencil/issues/3434#issuecomment-1219548078 to see if it helps

[tonypatton]

Any update on this issue? Seems crazy that react-testing-library and react-ionic might be broken for 6 months and there is not a larger discussion here?

[staff0rd]

This issue is easily reproducible in a new ionic app:

1. ionic start > react > tabs template
2. Change the generated test to use getByText
3. Run the test

Result:

 FAIL  src/App.test.tsx (18.379 s)
  ✕ renders without crashing (16800 ms)

  ● renders without crashing

    RangeError: Invalid string length

      at printObjectProperties (node_modules/pretty-format/build/collections.js:174:47)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printListItems (node_modules/pretty-format/build/collections.js:141:19)
      at Object.serialize (node_modules/pretty-format/build/plugins/DOMCollection.js:62:41)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:44:79
...

Here's a repo where the first commit is the result of ionic start and the second commit is the change to getByText.

@vincenthongzy your reply does not solve this problem, and inspecting the result of npm why nwsapi we see:

npm why nwsapi
[email protected]
node_modules/nwsapi
  nwsapi@"^2.2.0" from [email protected]
...

[cuzzlor]

Bump.

We're still getting this after following these instructions: https://ionic.io/blog/testing-ionic-react-apps-with-jest-and-react-testing-library and using https://github.com/ionic-team/ionic-react-test-utils

[fridgeAdmin]

I can't upgrade ionic/react from v6.0.1 because of this error. Even if I downgraded @stencil/core to v2.10.0.

[drpicox]

Still happening. I stumbled into what @staff0rd explains.

Sadly, it makes TDD/BDD a lot harder or impossible. Waiting up to 10 seconds for a test when it fails (the expected thing in TDD), without any usable error message, is not viable.

If it helps, I have added a demo repository here:

• https://github.com/drpicox/ionic-screen-debug-fail

[staff0rd]

This is happening because @testing-library/dom expects constructor.name but @ionic/stencil does not expose constructor.name.

This can be fixed in either library:

1. By adding constructor.name to @ionic/stencil. This approach would then require a rebuild of @ionic/core with that change. I'm not sure how to integrate @stencil/core updates into the @ionic/core build so I haven't tested this approach. Or;
2. By updating @testing-library/dom to serialize items with constructor.is, a property that @stencil/core does expose. The package needs to be built, and this branch includes that output. With this approach, which I was able to test and saw this bug resolved, still has an element of complexity because @testing-library/react appears to install @testing-library/dom in its child node_modules folder. As such, to use this approach, the output of dist needs to be copied into your project's node_modules/@testing-library/react/node_modules/@testing-library/dom/dist folder to resolve the bug.

I note that with approach #2, the output of debug() is in kebab case rather than camel case, even though we're in react:

[liamdebeasi]

Can everyone try the following dev build, and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected]

Please note that this is a dev build of Ionic 7. As a result, it is subject to the Ionic 7 Migration Guide and Breaking Changes.

[staff0rd]

@liamdebeasi I can confirm that dev build works as expected:

import { IonSkeletonText } from '@ionic/react'
import { waitForIonicReact } from '@ionic/react-test-utils'
import { render } from '@testing-library/react'

describe('SkeletonForm', () => {
  it('should render a skeleton form', async () => {
    const { debug } = render(<IonSkeletonText />)
    await waitForIonicReact()
    debug()
  })
})

Result:

[vmstarchenko]

Can everyone try the following dev build, and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected]

Please note that this is a dev build of Ionic 7. As a result, it is subject to the Ionic 7 Migration Guide and Breaking Changes.

Everything works fine with this fix. My problem would be solved after merge.

[liamdebeasi]

Hi everyone,

The fix for this has been released in Stencil v3.2.1. Ionic has been updated to use that version, and this update should be available in an upcoming release of Ionic.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.