1

I am writing test cases for a component and currently using MonacoEditor in my component. During running test cases I was getting below error:

Cannot find module 'monaco-editor' from 'node_modules/@uiw/react-monacoeditor/lib/index.js'

To Fix this above error I added a moduleNameMapper property inside package.json

"moduleNameMapper": {
      "monaco-editor": "<rootDir>/node_modules/@uiw/react-monacoeditor/lib/index"
    }

and after adding the property inside package.json and ran test case again I got the following error somewhere inside monacoEditor node_modules config files.

Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'create')]

I am looking for some workaround so I can completely mock this MonacoEditor module with jest and react testing library (RTL) or any way to resolve the error I am getting currently

Tried to mock like below and tried numerous ways provided online but nothing worked.

jest.mock('@uiw/react-monacoeditor', ()=>({
    MonacoEditor: ()=>null
}));

Error I am getting now:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Thanks in advance

Singh
  • 11
  • 5

2 Answers2

0

This issue can be fixed by mocking the component returned by react-monacoeditor library

jest.mock('@uiw/react-monacoeditor', ()=>({})=>(<div></div>));
Singh
  • 11
  • 5
0

I had also being struggled with this issue for couple of hours. I fixed it using following steps:

1). Create mocks directory in the projects root (at the same level with node-modules);

2). Create monaco-editor.ts that exports modules you need:

module.exports = {
  editor: {
    getModelMarkers: jest.fn().mockReturnValue([]),
    // other methods here
  },
  Position: {},
  // other modules here
};

And that's it! When Jest parser finds imported 'monaco-editor' modules it looks in mocks folder first where finds our created 'monaco-editor.ts' module. Then it takes all the required modules from here.

Philipp
  • 1
  • 2