Usage along with Jest

[StefanoSega]

I'm using successfully classnames-loader in my project but actually I've a problem when using it along with Jest, as I'm not able to run the loader on the files to test when I load them, and so the function statement breaks:

const styles = require('./styles.scss');

<div className={styles({
        classA: true,
        classB: true
      })}
      >Hi!</div>

something like this breaks because styles is not a classnames-loader function.

To mock .css files in Jest I used identity-obj-proxy:

{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    }
  }
}

this works fine when I use the styles object properties directly because mocks all the css classes into a single object, but of course it fails when is used as a function.

How I can configure Jest to run classnames-loader on the files that I need to test?

[gcdurastanti]

@StefanoSega Wondering if you ever resolved this? I'm having a similar issue with my project!

[StefanoSega]

Hi @gcdurastanti

unfortunately no, I gave up and removed classnames-loader, instead I use classnames with es6/typescript this way:

import classNames from 'classnames';

const styles = require('./styles.scss');

<div className={classNames(styles.classA, {
        [styles.classB]: true
      })}
      >Hi!</div>

[gcdurastanti]

@StefanoSega, I managed to work around this issue with Jest moduleNameMapper and a style mock.

/* styleMock.js */

import classNames from "classnames";

const ClassnameProxy = new Proxy(classNames, {
  get: function(target, key) {
    return key;
  }
});

export default ClassnameProxy;

/* jest.config.js */

module.exports = {
  setupTestFrameworkScriptFile: require.resolve('./jest.setup.js'),
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/src/util/styleMock.js',
  },
};

Cheers!