title: Jest Cannot find SCSS module
body: <p>Here's my code (just a very basic setup). All the files are in the same folder.<br>
  I am using <code>create-react-app</code>.</p>
  
  <p><strong>User.tsx:</strong></p>
  
  <pre><code>import React from "react";
  import styles from "./User.module.scss";
  
  const User: React.FC = () =&gt; {
    return &lt;div className={styles.user}&gt;User&lt;/div&gt;;
  };
  
  export default User;
  </code></pre>
  
  <p><strong>User.module.scss:</strong></p>
  
  <pre><code>@import "scss/abstracts";
  
  .user {
    color: $dark_theme_color;
  }
  </code></pre>
  
  <p><strong>User.test.tsx:</strong></p>
  
  <pre><code>import React from "react";
  import { render, getByText } from "@testing-library/react";
  import User from "./User";
  
  it("renders correctly", () =&gt; {
    const { asFragment } = render(&lt;User /&gt;);
    const fragmentElement = asFragment().firstChild as HTMLElement;
    const root = getByText(fragmentElement, "User");
  
    expect(root).not.toBe(null);
    expect(root).toMatchSnapshot();
  });
  </code></pre>
  
  <p>When running <code>jest</code> I get this error:</p>
  
  <pre><code>FAIL  src/pages/User/User.test.tsx
     ● Test suite failed to run
  
  src/pages/User/User.tsx:2:20 - error TS2307: Cannot find module './User.module.scss'.
  
  2 import styles from "./User.module.scss";
  </code></pre>
  
  <p><strong>jest.config.js:</strong></p>
  
  <pre><code>module.exports = {
    roots: ["&lt;rootDir&gt;/src"],
    transform: {
      "^.+\\.tsx?$": "ts-jest"
    },
    setupFilesAfterEnv: [
      "@testing-library/react/cleanup-after-each",
      "@testing-library/jest-dom/extend-expect"
    ],
    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
    moduleNameMapper: {
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    }
  };
  </code></pre>
  
  <p>I have tried almost all solutions from the first 2 pages of google search results, like:</p>
  
  <ul>
  <li>using <code>__mocks__/styleMock.js</code></li>
  <li><code>jest.mock("./User.module.scss")</code></li>
  <li><code>jest-transform-css</code></li>
  <li><code>jest-css-modules-transform</code></li>
  <li><code>jest-css-modules</code></li>
  <li><code>import * as styles from "./User.module.scss";</code></li>
  <li>added <code>declare module "*.scss";</code> in <code>globals.d.ts</code></li>
  </ul>
  
  <p>but nothing works.<br>
  Please help.</p>