keyz / identity-obj-proxy

An identity object using ES6 proxies. Useful for mocking webpack imports like CSS Modules.
MIT License
497 stars 18 forks source link

Use it with babel-plugin-react-css-modules #6

Open Igor-Vuk opened 6 years ago

Igor-Vuk commented 6 years ago

Is there a way to use it with babel-plugin-react-css-modules? There is no need for style object with this install. For example I use it like this.

import './titleComponent.local.scss'
const TitleComponent = () => (
  <div styleName="container">
    <h2 styleName="align-center">Home Scene</h2>
    <img src={logo} alt="logo" styleName="imageRotate" className="img-fluid mx-auto d-block" />
  </div>
)

styleName are CSS Modules and className are global (Bootstrap styles) and this is how my snapshot looks when testing with JEST. Instead of just the the name of the class it gives me the whole generated css module name.

exports[`should render TitleComponent correctly 1`] = `
<div
  className="scenes-home-components-___titleComponent-local__container___3XGZ-"
>
  <h2
    className="scenes-home-components-___titleComponent-local__align-center___weEgB"
  >
    Home Scene
  </h2>
  <img
    alt="logo"
    className="img-fluid mx-auto d-block scenes-home-components-___titleComponent-local__imageRotate___XkO9S"
    src="test-file-stub"
  />
</div>
designbyadrian commented 6 years ago

I added a new entry in .babelrc for the test environment:

"development": {},
"production": {},
"test": {
  "plugins": [
    ["babel-plugin-react-css-modules", {
      "generateScopedName": "[name]-[local]", ⬅️ name it whatever you wish
      ...
      }
    }]
  ]
}