oklas / react-app-alias

:label: Alias and multiple src directory for craco or rewired create-react-app
MIT License
173 stars 18 forks source link

Jest could not locate aliased module #24

Closed exaucae closed 3 years ago

exaucae commented 3 years ago

Hello @oklas,

I have trouble running react tests with dangerous aliased imports . Already saw related issues in the repo. I doubt we share the same context.

Here is the error:

$ yarn test
yarn run v1.22.10
$ react-app-rewired test -- --config=jest.config.ts
The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

 FAIL  test/App.test.tsx
  ● Test suite failed to run

    Configuration error:

    Could not locate module @/shared/components/Toaster mapped as:
    ../../shared/$1.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@\/shared\/(.*)/": "../../shared/$1"
      },
      "resolver": undefined
    }

Below, my config files:

// jest.config.json

const jestConfig = {
  preset: 'ts-jest',
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
    },
  },
  verbose: true,
  // see https://github.com/facebook/jest/issues/7914#issuecomment-464352069
  //   testMatch: ['<rootDir>/test/**/+(*.)+(test).+(tsx)'],
  testMatch: ['<rootDir>/test/**/*(*.)+(test).+(tsx)'],

  setupFilesAfterEnv: ['<rootDir>/test/setupTests.ts'],
  moduleFileExtensions: ['js', 'ts', 'tsx'],
  collectCoverage: true,
  coverageDirectory: 'target/coverage',
  collectCoverageFrom: [
    'src/**/*.tsx',
  ],
  moduleNameMapper: {
    '^.+\\.(css)$': 'identity-obj-proxy',
    '^.+\\.(png|svg|pdf|jpg|jpeg)$': 'jest-transform-stub',
    '^@/admin/(.*)': '<rootDir>/src/$1',
    '^@/shared/(.*)': '../../shared/$1',

  },
};

export default jestConfig;
// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/shared/*": ["../../shared/*"],
      "@/admin/*": ["src/*"]
    }
  }
}
// confg.overrides.json
const {aliasDangerous, aliasJest, configPaths} = require('react-app-rewire-alias/lib/aliasDangerous')

const aliasPaths = configPaths('./tsconfig.paths.json')

module.exports = aliasDangerous(aliasPaths)
module.exports.jest = aliasJest(aliasPaths)
//tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "../../shared"
  ]
}

dependencies

 "react-app-rewire-alias": "^1.0.1",
    "react-app-rewired": "^2.1.8"
oklas commented 3 years ago

May be something wrong with paths. Need to reproduce somehow. Take as a base example app named above (dangerous mode) in this repo example folder. Add minimal changes that match your requirements. Make a commit and push to reproduce.

exaucae commented 3 years ago

You were right. Changed '^@/shared/(.*)': '../../shared/$1' to '^@/shared/(.*)': '<rootDir>/../../shared/$1' in moduleNameMapper of jest.config.json .

Works fine now.