testing classNames with mocha and css-modules

[KutnerUri]

I trying to verify a component applies the correct classes. For example:

import styles from './styles.modules.scss';

export default function BiggaButton(props){
    return <button className={props.big ? styles.bigButton : ''} {...props} />
}

import React from 'react';
import { render } from '@testing-library/react';
import { expect } from 'chai';

import Button from './button';

it('should be big', () => {
    const { getByText } = render(<Button big>actual button</Button>);
    const rendered = getByText('actual button');
    expect(rendered.className).to.include('bigButton');
});

I expect this test to pass, but actually I'm getting a failure, saying that className is ''. This seems to work out of the box with Jest in Create React App, but not with bit.envs/testers/mocha@5.0.2.

I am wondering what's the best way to make this work. Obviously, this comes down to environment. It is css-modules that generates the classes object, and mocha has no way of knowing this.

This plugin should solve it: https://www.npmjs.com/package/css-modules-require-hook it also requires a node-sass preprocessor to support scss. 😕

Any ideas?

Specifications

• bit version: 14.7.2
• compiler: bit.envs/testers/mocha@5.0.2