jestのmoduleNameMapperは，順序が大事

moduleNameMapper: {
    "^~/(.+)": "<rootDir>/src/$1",
    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
  }

// components/foo.tsx
import styles from "~/styles/Foo.module.css"

   Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /work/src/styles/Layout.module.css:1
    .flexContainer {
    ^

    SyntaxError: Unexpected token '.'
        at compileFunction (<anonymous>)