Add the ability for Jest to mock the styles object from a CSS module

[shahzainb]

Hi @ro-savage,

At the moment, Jest isn't able to mock the styles object that would be imported from a CSS module. This issue occurs if you're trying to test the availability of a className within a spec.

For example, below I've put some sample code for a button:

PrimaryButton.spec.js:

import PrimaryButton from './';
import React from 'react';
import { mount } from 'enzyme';

describe('PrimaryButton component', () => {
  let component;

  beforeEach = () => {
    component = null;
  };

  it('should have button__primary class', () => {
    component = mount(<PrimaryButton label={'test'} />);
    expect(component.find('button').hasClass('button__primary')).toEqual(true);
  });
});

PrimaryButton.js:

import React from 'react';
import styles from './PrimaryButton.module.css';

const PrimaryButton = ({
  label,
  onClick,
  className,
  disabled,
  ...props
}) => (
  <button
    onClick={onClick}
    className={styles["button__primary]"}
    disabled={disabled}
    {...props}
  >
    {label}
  </button>
);

export default PrimaryButton;

PrimaryButton.module.css

.button__primary {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  width: fit-content;
  height: 34px;
  line-height: 35px;
  padding: 0px 21px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  color: #fff;
  background-color: #bc141a;
  border: none;
}

Building this through react-scripts-cssmodules works perfectly fine, and the classnames are outputted with the expected identName as per the config ([path]__[name]__[local]). However, while testing, the class attribute ends up being empty.

The solution I found for this, was to add a config within Jest moduleNameMapper to include identity-obj-proxy. I've forked the project and committed it here: https://github.com/shahzainb/react-scripts-cssmodules/commit/ca286090fc3693a474e2d47606497a6d86801a76

I found the solution on the Jest documenation: https://facebook.github.io/jest/docs/en/webpack.html#mocking-css-modules

Please let me know if this is a valid issue, and if you're ok with me creating a PR for this.

Thanks.

[Andsbf]

👍 I was about to create an issue on the same topic!

[ro-savage]

There must have been an update to Jest or something as it was previously working (and has/had working test in CRA).

Happy for you to do a PR here, and even better a PR to CRA as well :)

[Andsbf]

you right, it looks like the CRA repo actually has it.

https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/scripts/utils/createJestConfig.js#L50

a rebase on the latest tag should do the magic.

[Andsbf]

the change is on the CRA master branch, but it has not been released under any tag so far. :(

Any idea how we could approach it?

[ro-savage]

This should be the same as CRA, as this was made to house cssmodules until they were merged.

If something isn't working in this repo. Feel free to do the PR here. And then I can advise how to address it in CRA (if it needs to be).

On 7/03/2018 5:10 PM, "Anderson Saunders" notifications@github.com wrote:

the change is on the CRA master branch, but it has not been released under any tag so far. :(

Any idea how we could approach it?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ro-savage/react-scripts-cssmodules/issues/5#issuecomment-371034184, or mute the thread https://github.com/notifications/unsubscribe-auth/AI0PWxnuo0yiHq_HV0faYBDH43Oormlbks5tb3nugaJpZM4Scpzd .