0

Inside my code I use babel-plugin-react-css-modules which is practically the same as react-css-modules

I have a code like this inside react component. styleName is for CSS Modules and I define styles for them inside countdownForm.local.scss className represent my Bootstrap classes

import './countdownForm.local.scss'

class CountdownForm extends Component {
...
render () {
    return (
      <div styleName="first" className="container">
        ...
      </div>
    )
  }
}

To test this component inside my test I have to use ignore-styles package because JavaScript can't handle CSS syntax and when we run unit tests, the test will try to import the CSS file without Webpack which will result error.

import register from 'ignore-styles'
import React from 'react'
import test from 'tape'
import CountdownForm from 'CountdownForm'

register(undefined, () => ({styleName: 'fake_class_name'}))

test('CountdownForm => should exist', (t) => {
  t.ok(CountdownForm)
  t.end()
})

By doing this everything passes great and test works without problem but I always get this warning in the console

Warning: Unknown prop styleName on tag. Remove this prop from the element.

It is not a problem of functionality because tests works but it is annoying to get this message every time I run tests. How to fix, get rid of it?

Igor-Vuk
  • 3,551
  • 7
  • 30
  • 65

1 Answers1

0

The warning is because you are not running the babel-plugin-react-css-modules compilation step before the test.

That works by replacing styleName prop with the computed CSS modules class names. Therefore styleName is never actually passed to the div in your real build (https://github.com/gajus/babel-plugin-react-css-modules#how-does-it-work). It would rewrite your component to something like...

class CountdownForm extends Component {
  ...
  render () {
    return (
      <div className="container CountdownForm_first_123xyz">
        ...
      </div>
    )
  }
}

In your test, without running the babel plugin first, you will successfully manage to ignore the CSS import via ignore-styles but the props replacement hasn't happened so you end up passing a styleName prop to the div, which is not a defined property for div component, so React will warn you

Best way to fix this would be to run a babel compilation step before the test, that way you can also test the real localised classnames assignment

alechill
  • 4,274
  • 18
  • 23
  • Hi alechill. That makes perfect sense but how do i run `babel-plugin-react-css-modules` before tests.It is defined within webpack and tests are outside the webpack bundle . I run the tests with the script `"test": "babel-tape-runner \"test/setup.js\" \"test/**/*test.jsx\" | node_modules/.bin/tap-summary"` Inside the setup I just require jsdom and ignore-styles. I like it when I have styleName and className inside my code to easily destinguish and customize the two. – Igor-Vuk May 15 '17 at 12:45
  • Well that runner should pipe through babel (using `.babelrc` for config) first so I'd make sure you have all the necessary plugins defined in that file `{ "plugins": ["babel-plugin-react-css-modules"] }` – alechill May 15 '17 at 13:02
  • alechill i tried it but no luck. I put in answer above how my .babelrc and webpack look like. – Igor-Vuk May 16 '17 at 00:22