css-global-variables icon indicating copy to clipboard operation
css-global-variables copied to clipboard

Cannot be used with Jest

Open LifeIsStrange opened this issue 5 years ago • 2 comments

● Test suite failed to run

    TypeError: Cannot read property 'getAttribute' of undefined

       8 |     return name.replace(/[A-Z]/g, m => "-" + m.toLowerCase());
       9 |   };
    > 10 |   public mainBlackTextColor = new CSSGlobalVariables({ normalize: this.camelToHyphens }).mainBlackText;
         |                               ^
      11 |   public mainWhiteTextColor = new CSSGlobalVariables({ normalize: this.camelToHyphens }).mainWhiteText;
      12 | 
      13 |   public getRandId(): string {

we have added css-global-variables to transformIgnorePatterns like we do for other libraries but it fail :/

LifeIsStrange avatar Jul 28 '20 08:07 LifeIsStrange

@colxi

LifeIsStrange avatar Jul 28 '20 08:07 LifeIsStrange

The issue seems to be that CSSGlobalVariables use native dom and therefore require a browser context, but Jest seems to execute it before the browser context is loaded. If that hypothesis is true, then to solve this issue, this library would need to expose an optional flag that await that e.g the root dom node has loaded before executing, or at least that do nothing if the DOM is not loaded. A bit like in https://github.com/Andarist/react-textarea-autosize/pull/127/files

LifeIsStrange avatar Jul 28 '20 10:07 LifeIsStrange