Enzyme: What is the recommended way to look for a className when using CSS Modules?

[brandondurham]

The classes for my component are generated dynamically using CSS Modules. They end up looking something like this:

<div class="ScrollArea__scrollArea___HQjeV ScrollArea__isOverflown___TMwDC"></div>

In certain conditions I need to look for the class that contains __isOverflown__, but I’m not sure what the best method might be. Any suggestions for looking for a class using a regex?

[blainekasten]

We use css modules at Hudl. Our general way of testing is one of the following:

• prevent obfuscating class names in test environments.
• Import the style object in test and reference just like how you render.
• use a different selector like [onClick] where possible.

I'm going to close this issue as it's more of a question than an issue with Enzyme. Feel free to keep the conversation going though.

[MrKou47]

@brandondurham Hi! I am using mocha, chai and enzyme to test my project. And my project also use scss and css-module. The most important thing is you should use css-modules-require-hook. Here is some code for test Component className.

// Hello.jsx
import style from './hello.scss'
class Hello extends Component {
  render(){
    return (
      <h1 className={style.title}>Hello world!</h1>
    );
  }
}

export default Hello;

// hello.scss
.title {
  color: red;
}

// hello.spec.js
import Hello from './Hello.js';
import style from './hello.scss'

describe('test Hello Component', () => {
  it('h1 should has current className', () => {
     const shallowHello = shallow(<Hello />);
     expect(shallowHello.find('h1').hasClass(style.title)).to.equal(true);
  });
});

// mocha-setup.js

import hook from 'css-modules-require-hook'
import sass from 'node-sass'

hook({
  extensions: [ '.scss' ],
  generateScopedName: '[name]-[local]-[hash:base64:5]',
  preprocessCss: data => sass.renderSync({ data }).css
});

And here is my test script is mocha --require ./scripts/mocha-setup.js --require jsdom-global/register --compilers babel-core/register *.spec.js

I hope this helps you 😊.