create-react-app-typescript icon indicating copy to clipboard operation
create-react-app-typescript copied to clipboard

Jest doesn't resolve absolute paths from tsconfig

Open Nizarius opened this issue 6 years ago • 1 comments

When running quick test:

import * as React from 'react';
import { shallow } from 'enzyme';
import App from '../App';

it('renders without crashing', () => {
  shallow(<App />);
});

I got error in Jest: 'Cannot find module '@store' from 'App.tsx'

My tsconfig:

{
  "compilerOptions": {
    "paths": {
      "@store": ["./store"],
      "@store/*": ["store/*"],
      "@scenes/*": ["scenes/*"],
      "@scenes": ["scenes"],
      "@components/*": ["components/*"],
      "@components": ["components"],
      "@utils": ["utils"],
      "@utils/*": ["utils/*"],
      "@api": ["./api"],
      "@constants/*": ["constants/*"],
      "@constants": ["constants"],
      "@assets/*": ["assets/*"],
      "@containers/*": ["containers/*"],
      "@containers": ["containers"],
      "@theme": ["theme"],
      "@types": ["types"]
    },
    "baseUrl": "./src",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "es7", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "./",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
    // "src/modules"
  ]
}

App is running successfully. But jest can't resolve absolute paths from tsconfig. What should i do to fix this?

Nizarius avatar Nov 30 '18 14:11 Nizarius

I think this is what you want: https://jest-bot.github.io/jest/docs/configuration.html#modulenamemapper-object-string-string

I have it set up like this to allow import blah from 'src/utils/blah':

moduleNameMapper: {
  '^src/(.*)$': '<rootDir>/src/$1'
}

naftis avatar Dec 13 '18 13:12 naftis