React testing library: Cannot find module declared in .d.ts

Issue

thx for your time.

I have a problem with react testing library. Everything work in browser. I can build, but when run the tests, jest cannot find typescript definitions.

If I use React lazy to import components, error cannot appear.

In my case is UI.d.ts. UI come from webpack module federation:

new ModuleFederationPlugin({
    name: "root",
    filename: "remoteEntry.js",
    remotes: { UI: process.env.UI_REMOTE_URL },
    shared: {
        ...deps,
        react: {
            singleton: true,
            requiredVersion: deps.react
        },
        "react-dom": {
            singleton: true,
            requiredVersion: deps["react-dom"]
        }
    }
}),

UI.d.ts is in root directory. Project tree:

├── README.md
├── UI.d.ts
├── package.json
├── public/
├── src/
├── tsconfig.json
├── webpack.config.js
├── yarn-error.log
└── yarn.lock

tsconfig.json:

{
  "exclude": [
    "node_modules",
    "./packages/**/node_modules"
  ],
  "compilerOptions": {
    "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": false,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "**/*.d.ts"
  ]
}

Solution

I found solution from this answer. Jest cannot recognise remote module. To fix it need to mock imported module:

jest.mock('UI/Button',
  () => ({
    myFunc: () => 'hello'
  }),
  { virtual: true }
);

Update

Mock needs to be outside of test

jest.mock('UI/Button',
  () => ({
    myFunc: () => 'hello'
  }),
  { virtual: true }
);

test('shold be ...',()=>{
    // ....
})

Answered By - Fiodorov Andrei