styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.28k stars 105 forks source link

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

Open vripoche opened 2 years ago

vripoche commented 2 years ago

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

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:

```bash
## 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 commented 2 years ago

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:

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