Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tests with toBeVisible() matcher failed on components use default _ responsive attribute #368

Open
vripoche opened this issue May 23, 2022 · 1 comment

Comments

@vripoche
Copy link

🐛 Bug Report

With 3.6.0 version, some tests with @testing-library/jest-dom toBeVisible() matcher break:

    RangeError: Invalid string length

      at compileSelector (node_modules/nwsapi/src/nwsapi.js:893:56)
      at compile (node_modules/nwsapi/src/nwsapi.js:753:16)
      at match_collect (node_modules/nwsapi/src/nwsapi.js:1358:16)
      at Object._matches [as match] (node_modules/nwsapi/src/nwsapi.js:1413:35)
      at exports.matchesDontThrow (node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36)
      at matches (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:50:10)
      at node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:35:18
          at Array.forEach (<anonymous>)
      at handleSheet (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:26:13)
          at Array.forEach (<anonymous>)

To Reproduce

Steps to reproduce the behavior:

  • Add this test in project using xstyled:
import { render } from '@testing-library/react'
import { x } from '@xstyled/styled-component

it('should test', () => {
   const { container } = render(<x.div bg={{ _: 'red' }} />)

    expect(container).toBeVisible()
})
  • yarn test
  • the test should break with RangeError: Invalid string length error (see above)
  • It breaks on all tests on component with responsive default attribute _ and toBeVisible() matcher
  • it does not break if we have xs or sm instead of _ in bg props.
  • it does not break if another matcher as toBeInvalid() is used
  • it worked with previous version 3.5.1

Expected behavior

  • Should not have RangeError: Invalid string length error

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 11.2.2
 - CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
 - Memory: 2.04 GB / 16.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
 - Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
 - npm: 8.7.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
@vripoche
Copy link
Author

It is due to nwsapi package, it is an old package many others depend on.
The owner has fixed the issue but not published release on NPM yet.
You can patch module:

  • wget https://raw.githubusercontent.com/dperini/nwsapi/master/src/nwsapi.js && mv nwsapi.js node_modules/nwsapi/src/
  • npx patch-package nwsapi

If you do not know patch-package please refer to : https://www.npmjs.com/package/patch-package
Issue on nwsapi: dperini/nwsapi#46

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant