kitze / custom-react-scripts

[DEPRECATED, use customize-cra] Allow custom config for create-react-app without ejecting
https://custom-react-scripts.netlify.com
MIT License
993 stars 97 forks source link

Fix Jest snapshot CSS Module class names, add CSS Module class name template as a configuration option. Closes #106 and #97. #136

Closed Jorer closed 6 years ago

Jorer commented 6 years ago

Jest snapshot class names with CSS Modules are only shown as undefined, this PR will change those to be shown as their actual class names using the identity-obj-proxy package. In the sample app creating the following snapshot test

import React from 'react';
import ReactDOM from 'react-dom';
import renderer from 'react-test-renderer';

import App from './App';

it('renders a snapshot', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

would format the element <div className={cssStyles.header}> in App.js as <div className={undefined}>, after this fix it will be <div className="header">. Closes #106

This PR will also add CSS Module class name template (localIdentName) as an ENV configuration option as REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE. If not provided the style-loader.js will use the default template [sha512:hash:base32]-[name]-[local]. Closes #97

Jorer commented 6 years ago

@kitze are you able to check this? This would probably close a couple more duplicate issues as well.

kitze commented 6 years ago

Tnx @Jorer