Provide first-class support for CRA

[nvh95]

Describe the bug
There are several issues with CRA, all of them related to that we couldn't modify jest's config freely (see how CRA overrides config here https://github.com/facebook/create-react-app/blob/63bba07d584a769cfaf7699e0aab92ed99c3c57e/packages/react-scripts/scripts/utils/createJestConfig.js#L94-L107 ):

1. (CSS Modules) We couldn't support CSS Modules since we cannot remove

moduleNameMapper: {
-  '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
},

(Can we add a module, instead of identity-obj-proxy, we keep the original behavior?)

2. (Sass) If we configure cssTransform like this:

transform: {
  "^.+\\.(css|scss|sass)$": "jest-preview/transforms/css",
},

Preview won't have CSS, the reason is "^.+\\.(css|scss|sass)$" doesn't replace "^.+\\.css$": resolve('config/jest/cssTransform.js'), so "^.+\\.css$": resolve('config/jest/cssTransform.js') still take place

transform: {
  "^.+\\.css$": resolve('config/jest/cssTransform.js'),
},

One workaround to make both .css, .scss, .sass work is to configure like this:

"transform": {
  "^.+\\.css$": "jest-preview/transforms/css",
  "^.+\\.(css|scss|sass)$": "jest-preview/transforms/css",
},

To Reproduce

• CSS Modules issue: any repo
• Sass: configure like this

"^.+\\.(css|scss|sass)$": "jest-preview/transforms/css",

Expected behavior
Jest Preview should work with CRA out of the box

Others

• We can find a way to override CRA config, like jest.config.js or use jest --config. But CRA/ Jest might throw an warning/ error for having multiple Jest config. Reference: https://github.com/facebook/jest/blob/49322b6e7afa9a3ffa1bb1c3d12660bf2869a004/packages/jest-config/src/resolveConfigPath.ts#L142-L156

• Another idea: We provide a cra-test function for user to use instead of using test from CRA directly?

[nvh95]

@nvh95 To update docs to mention case when Sass might not work