Jest CSS enhancement suggestion: don't lose classNames in snapshot tests.

[dawnmist]

We've been using react-app-rewired with create-react-app v1 and react-scripts-ts for Typescript support for a while, and are starting to look at the new v2.1 release with Typescript support.

One of the enhancements we are using in jest snapshot tests is to output the classnames from css imports in the snapshot. This enables the ability to test parts of a component where a change in props or a user interaction is supposed to result in a change in css being applied to the component (e.g. as a simple make-believe example, changing className from "" to "locallyModified" where there is a :local(.locallyModified) { color: #FFFF44; } class in the css).

The snapshot then contains <div className="locallyModified"> instead of simply <div>, which highlights an issue when someone makes a change that breaks the behaviour identifying when the conditional styling should be altered.

The actual cssTransforms.js file is simply:

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

module.exports = idObj;

Is it possible to consider adding this to react-scripts/config/jest/cssTransform.js by default? Or is there a reason why it couldn't/shouldn't be widely used?

[Timer]

/cc @ro-savage

[ro-savage]

I am currently traveling and without a computer. Happy to look into when I am back home in December, or for someone else to run with it.

…

On Tue, 30 Oct 2018, 7:17 AM Joe Haddad, ***@***.***> wrote: /cc @ro-savage <https://github.com/ro-savage> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5622 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AI0PWwsHPSNhqvSpu4y_NLFcUF829mFOks5uqENBgaJpZM4YBiiB> .

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[dawnmist]

Please don't auto-close this issue - the person who is intending to look at it is currently away from home without a computer.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[dawnmist]

Any chance that this proposed improvement can be checked for whether it should be used? The issue has gone stale again without response.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[dawnmist]

Looking at the changes in CRA v2 css modules handling, the proxy I've used in the past won't work directly (as the styles were previously output as named exports, rather than the equivalent to a default object with named fields).

However, the same can be achieved by following the instructions on using webpack with Jest:
Mocking CSS Modules
Which refers to identity-obj-proxy to provide the actual mock.

I've been migrating to using typescript-plugin-css-module for handling the typescript type definitions for css/scss modules (which generates css/scss class names as the equivalent to a default object with named fields), and can confirm that my original jest mock will not work with a default object-like type definition, but identity-obj-proxy as advised in the Jest documentation does work properly.