Using CSS modules in react when testing with enzyme

We’ve been using CSS modules in a react project, and wanted to use those classes in our tests. However we quickly ran into the problem that none of the classes were found. Any wrapper.exists would be false. The problem was with our css modules, as they were not imported correctly during tests.

Our code looked like this:

import styles from './QA.scss?module';

interface QAProps {
  question: string;
  answer?: string;
  isOpen?: boolean;

const QA:React.FC<QAProps> = ({question, answer, isOpen}) => (
  {isOpen && <div className={styles.Answer}>{answer}</div>}

When testing it we tried the following:

it('has no answer when not opened', () => {
  const wrapper = shallow(<QA question="hi" />)
  // passes

it('has an answer when opened', () => {
  const wrapper = shallow(<QA question="hi" answer="answer" isOpen />)
  // fails

The problem lied in our fileMock for jest.

  // jest.config.js
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(scss|less|scss\\?module)$": "<rootDir>/__mocks__/fileMock.js"
// __mocks__/fileMock.js
module.exports = 'content';

Because of this export, styles.Answer would be undefined. Instead, during our tests we want it to just return the name of the property. In PHP you would use the __get magic method. (Un)fortunately, this is also possible in js, through a Proxy object.

We make a proxy of an empty object, that always returns the property that is being requested. And in the jest.config.js we update the css files to refer to this new cssMock.js file.

// __mocks__/cssMock.js
const target = {};

const handler = {
    get: function(target, prop) {
        return prop;

const proxy = new Proxy(target, handler);

export default proxy;

Now, our tests pass, and our css modules can be used within our tests.

Gert de Pagter
Software Engineer

My interests include software development, math and magic.