TypeError: Cannot convert a Symbol value to a string

TehZarathustra commented 4 years ago

Hey! Recently i've started using component library, which has reshadow in it The problem is when i try to test (jest, enzyme) components with that lib i get the error

TypeError: Cannot convert a Symbol value to a string

      3 | import axios from 'axios';
      4 | import shortid from 'shortid';
    > 5 | import {Button, Link} from '@some-lib';
        | ^

      at create (node_modules/@reshadow/core/index.js:51:15)
      at Object.<anonymous> (node_modules/@some-lib/b2b/components/OptionGroup/index.js:17:36)
      at Object.<anonymous> (node_modules/@some-lib/b2b/index.js:407:20)
      at Object.<anonymous> (static/react-components/Appform/pages/PageHOC/index.js:5:1)
      at Object.<anonymous> (static/react-components/Appform/pages/PageHOC/test.js:5:1)

I've tried adding reshadow/babel to babel config, but it had no effect

babel.config.js

module.exports = {
    plugins: ['reshadow/babel', 'babel-plugin-styled-components'],
    presets: ['@babel/preset-env', '@babel/preset-react']
};

jest.config

"collectCoverageFrom": [
  "./static/react-components/**/*.{js,jsx}"
],
"globals": {
  "BEM": {
    "blocks": {}
  }
},
"moduleNameMapper": {
  ".*\\.(css|sass|svg|png|jpg)$": "identity-obj-proxy"
},
"setupFiles": [
  "./tasks/jest.setup.js"
],
"testMatch": [
  "<rootDir>/static/react-components/**/__tests__/**/*.js?(x)",
  "<rootDir>/static/react-components/**/?(*.)(spec|test).js?(x)"
]

Thanks!

lttb commented 4 years ago

Hi @TehZarathustra, thank you for the issue and sorry for the delay!

The problem here is with identity-obj-proxy, because it makes a proxy on styles from .css, and every value returns it's key, event the symbol, that reshadow uses for some caching and internal needs.

I'd suggest to declare this kind of proxy:

/**
 * Proxy that works with reshadow, which uses symbols in styles
 *
 * @see https://github.com/keyz/identity-obj-proxy/blob/06716fbb8f4fb1cab0b66d7d9b474bed628a4766/src/index.js
 */

module.exports = new Proxy(
    {},
    {
        get(target, key) {
            if (typeof key === 'symbol') {
                return target[key];
            }

            if (key === '__esModule') {
                return false;
            }

            return key;
        },
    },
);

And in your jest.config.js:

"moduleNameMapper": {
  ".*\\.(sass|svg|png|jpg)$": "identity-obj-proxy",
  "\\.css$": "<rootDir>/your-own-identity-obj-proxy",
},

Hope it helps.

TehZarathustra commented 4 years ago

It does. Thanks a lot!

yandex / reshadow

TypeError: Cannot convert a Symbol value to a string #131