Unable to get css classes injected in element with scss and css modules.

[alveshelio]

• react-testing-library version: 5.3.1
• react version: 16.6.3
• node version: 10.4.1
• npm version: 6.4.1

Reproduction:

Here's the Codesandbox: https://codesandbox.io/s/xvw9r8z24z
In this codesandbox I can run my tests
However, in this codesandbox I have the project setup: https://codesandbox.io/s/r15r76o8y4
I can not run the project because of missing dependencies.

Problem description:

I had created another issue regarding not seeing classes in components that I was testing and I thought it was a problem how I was developing my components in storybook. However, I've tested a component in our project and I still have the same problem.

The component displays just fine with the classes when I run the project, however when I try to test my components and check if they have a class, the test fails.

I've tried to rename the file from .scss to css and instead of having className={s.active}, I'd have className="active" and the test would pass because the class was injected into the dive element.

I've been struggling with this, I don't know if it has to do with postcss or how scss files should be handled. I'm not getting any error when I run the text other than why the test is not passing.

In jest.config.js I've tried with the following settings:
"moduleNameMapper": {
".+\.(css|styl|less|sass|scss|svg)$": "/node_modules/jest-css-modules-transform",
},

but the result is the same.

@kentcdodds, I'm sorry to be a pain but do you think you could check my codesandbox and see if I'm doing something wrong the way I'm configuring jest with scss?

[alexkrolick]

Jest config does not work in codesandbox, but here's what I think the problem is:

This is your style-mock.js

module.exports = {}

This means all style imports are replaced with an empty object.

Instead of this mock, you can point to a module called identity-obj-proxy that maps s.xyz to "xyz":

// in jest.config.js
moduleNameMapper: {
    ".+\\.(css|scss)$": "identity-obj-proxy"
  },

It looks like this module is already in package.json.

[alexkrolick]

Also, when I download the project locally it appears that react-scripts ts is not using all the options in your jest.config.js. It looks like only a few properties are supported for overrides: https://facebook.github.io/create-react-app/docs/running-tests#configuration

To get around this you may need to follow the instructions to eject from create-react-app, or run jest directly and copy in any missing config that CRA set up for you (e.g. setupTests.js).