jaredpalmer / tsdx

Zero-config CLI for TypeScript package development
https://tsdx.io
MIT License
11.2k stars 505 forks source link

Jest and `babel-plugin-module-resolver` don't work together? #1116

Closed dragansmlinus closed 2 years ago

dragansmlinus commented 2 years ago

Current Behavior

I've added .babelrc

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": "./",
        "alias": {
          "components": "./src/components",
          "hooks": "./src/hooks",
          "types": "./src/types",
          "utils": "./src/utils",
          "*": ["src/*", "node_modules/*"]
        }
      }
    ]
  ]
}

and jest.config.js file in order to override the default moduleNameMapper (tsdx provides here [])

module.exports = {
    moduleNameMapper: {
        "^components": "<rootDir>/src/components",
        "^hooks(.*)$": "<rootDir>/src/hooks",
        "^types(.*)$": "<rootDir>/src/types",
        "^utils(.*)$": "<rootDir>/src/utils",
    },
};

Running the test (tsdx test --passWithNoTests) returns

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

    Configuration error:

    Could not locate module components/builderIo mapped as:
    /Users/dragan/Projects/xxx/xxx-builder-ui/src/components.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^components/": "/Users/dragan/Projects/xxx/xxx-builder-ui/src/components"
      },
      "resolver": undefined
    }

      1 | import React, { FC, HTMLAttributes, ReactChild } from 'react';
      2 |
    > 3 | import 'components/builderIo'
        | ^
      4 |
      5 | export { Footer } from 'components/builderIo/Footer'
      6 | 

      at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:545:17)
      at Object.<anonymous> (src/index.tsx:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.118s

tsconfig.json

{
  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
  "include": ["src", "types"],
  "compilerOptions": {
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "importHelpers": true,
    // output .d.ts declaration files for consumers
    "declaration": true,
    // output .js.map sourcemap files for consumers
    "sourceMap": true,
    // match output dir to input dir. e.g. dist/index instead of dist/src/index
    "rootDir": "./src",
    // stricter type-checking for stronger correctness. Recommended by TS
    "strict": true,
    // linter checks for common issues
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    // use Node's module resolution algorithm, instead of the legacy TS one
    "moduleResolution": "node",
    // transpile JSX to React.createElement
    "jsx": "react",
    // interop between ESM and CJS modules. Recommended by TS
    "esModuleInterop": true,
    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
    "skipLibCheck": true,
    // error out if import and file system have a casing mismatch. Recommended by TS
    "forceConsistentCasingInFileNames": true,
    // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
    "noEmit": true,
    "baseUrl": "./",
    "paths": {
      "components": ["./src/components"],
      "hooks": ["./src/hooks"],
      "types": ["./src/types"],
      "utils": ["./src/utils"],
      "*": ["src/*", "node_modules/*"]
    }
  }
}
dragansmlinus commented 2 years ago

Fixed it by:

module.exports = {
    moduleNameMapper: {
        "^components/(.*)": "<rootDir>/src/components/$1",
        "^hooks/(.*)": "<rootDir>/src/hooks/$1",
        "^types/(.*)": "<rootDir>/src/types/$1",
        "^utils/(.*)": "<rootDir>/src/utils/$1",
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/fileMock.js",
        "\\.(css|less)$": "<rootDir>/jest/styleMock.js"
    },
    transformIgnorePatterns: [
        "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
        "^.+\\.js$",
    ],
};
// src/jest/fileMock.js
module.exports = 'test-file-stub';

// src/jest/styleMock.js
module.exports = {};

Refs: