Create-React-App v3 not running Jest tests with Absolute Imports of other components

user_8379751 0
Viewed 1073

Based on guidance from (https://facebook.github.io/create-react-app/docs/importing-a-component#absolute-imports) I have tried to run Jest tests on two components in my project (https://github.com/refayathaque/k1y0b1eahsqztk48) that import other components and libraries.

When running the application locally the absolute path imports work fine and everything renders as expected, but during Jest testing, absolute path imports do not work I believe.

I was using the 'NODE_PATH=src/' in the '.env' file before, but CRA3 recommends we do not and instead use the 'jsconfig.json' file. I have the 'jsconfig.json' file but the tests are still not running. The code below is what I have in the 'jsconfig.json' file:

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
}

Error message from Jest:

Test suite failed to run

    /Users/refayathaque/Documents/k1y0b1eahsqztk48/node_modules/react-s3/lib/ReactS3.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Signature from "./Signature";
                                                                                                    ^^^^^^^^^

    SyntaxError: Unexpected identifier
babeljs jestjs reactjs
1 Answers

I finally managed to fix this. What was important was that the rootDir was the same as the baseUrl in the tsconfig.json, and that the moduleNameMapper of jest also included the correct mapping.

So here's what works in my setup:

In tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {},
    "rootDir": ".",
    // ...
  },
  "include": ["."],
  "exclude": [
    // ...
  ]
}

and in your jest config, wherever that is, regardless if you created your app with create-react-app or not:

  "jest": {
    "moduleNameMapper": {
      "src(.*)$": "<rootDir>/src$1"
    }
  },

My .env file includes: NODE_PATH=src/.

This works for imports like this one: import {StyledDropdown} from 'src/components';

This is for a project created using create-react-app (react-scripts-ts@3.1.0), not ejected, using typescript@3.7.2.

user_44306400
Related