0

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.

enter image description here

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"
  ]
}
Fiodorov Andrei
  • 1,778
  • 1
  • 11
  • 26

1 Answers1

0

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 ...',()=>{
    // ....
})
Fiodorov Andrei
  • 1,778
  • 1
  • 11
  • 26
  • The above link doesn't point anywhere. Use this instead https://stackoverflow.com/questions/56052045/mock-dynamic-require-in-node-with-jest/56052635#56052635 – Neel Prajapati Mar 23 '22 at 06:14
  • 1
    How did you resolve it? Can you pls help here : stackoverflow.com/questions/72909100/how-to-test-one-micro-front-end-component-in-which-other-micro-frontend-componen – micronyks Jul 11 '22 at 09:13