Jest won't detect my CSS Module class names

[jimmy-e]

🐛 Bug Report

My tests are not capturing my html class names when using CSS Modules, this is despite using moduleNameMapper and identity-obj-proxy for my .scss files in my jest.config.js.

To Reproduce

Clone this repo.
Run yarn.
Run yarn test sampleComponent.test.tsx.

Expected behavior

The test should pass.

Instead, it fails because it is unable to find the class name associated with the div.

sampleComponent.tsx:

import * as React from 'react';
import styles from './sampleComponent.module.scss';

const SampleComponent: React.FC = () => (
  <div className={styles.foo}>
    Hello World
  </div>
);

export default SampleComponent;

sampleComponent.test.tsx:

import * as React from 'react';
import { shallow } from 'enzyme';
import SampleComponent from './sampleComponent';

test('component renders', () => {
  /* eslint-disable */
  const wrapper = shallow(<SampleComponent />);
  console.log('************');
  console.log(wrapper.html());
  expect(wrapper.find('.foo').length).toBe(1);
});

test output:

 FAIL  ./sampleComponent.test.tsx
  ✕ component renders (46ms)

  ● component renders

    expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

       8 |   console.log('************');
       9 |   console.log(wrapper.html());
    > 10 |   expect(wrapper.find('.foo').length).toBe(1);
         |                                       ^
      11 | });
      12 |

      at Object.<anonymous> (sampleComponent.test.tsx:10:39)

  console.log sampleComponent.test.tsx:8
    ************

  console.log sampleComponent.test.tsx:9
    <div>Hello World</div>

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.895s, estimated 5s
Ran all test suites matching /sampleComponent.test.tsx/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

jest.config.js:

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  moduleDirectories: ['node_modules'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|scss)$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
  preset: 'ts-jest',
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.tsx?$': 'ts-jest',
  },
};

Link to repo

Run npx envinfo --preset jest

npx: installed 1 in 1.863s

  System:
    OS: macOS High Sierra 10.13.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Binaries:
    Node: 11.4.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  npmPackages:
    jest: 24.8.0 => 24.8.0

[jeysal]

This is because you import default from the SCSS file instead of import *.
You can see that logging the imported object prints 'default'.
You can use a named import or look for other solutions e.g. in keyz/identity-obj-proxy#8

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.