ionic-framework: bug: stencil, proxyCustomElement causing loops with pretty format plugin

Prerequisites

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

Ionic Framework Version

v4.x
v5.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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 23 (7 by maintainers)

Most upvoted comments

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?

tonypatton on Nov 3, 2022

@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:

staff0rd on Mar 26, 2023

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:

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;
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:

staff0rd on Mar 14, 2023

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

vincenthongzy on Sep 24, 2022

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

npm install @ionic/react@7.0.0-dev.11679666496.116ae037 @ionic/react-router@7.0.0-dev.11679666496.116ae037

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.

liamdebeasi on Mar 24, 2023

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

cuzzlor on Feb 9, 2023

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

liamdebeasi on Jun 24, 2022