Testing with Jest fails to import monaco

Hi,

First of all, I’m sorry if this is not the right place. I’m at a loss, and there are many parts involved in my question.

I am trying to run my test suite while using the Monaco editor. I use create-react-app, thus React and jest, and when I run tests, I get the following error:

/home/js/jest-react-monaco/node_modules/monaco-editor/esm/vs/editor/editor.api.js:5
import { PolyfillPromise } from '../base/common/winjs.polyfill.promise.js';
           ^

SyntaxError: Unexpected token {
 at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

However, when browsing to my website, the editor loads correctly.

Steps to reproduce:

create-react-app jest-monaco-test 
cd jest-monaco-test/
yarn add monaco-editor monaco-editor-webpack-plugin react-monaco-editor

Edit App.js and add:

import MonacoEditor from 'react-monaco-editor';

Then run tests with yarn test and get the above error.

I have no idea if this is a problem with jest, create-react-app, monaco-editor or react-monaco-error, or that I simply missed something. Any help will be appreciated. 😃

[manstis]

For the purposes of prosperity and to help others I overcame my react-monaco-editor/jest issues by mocking monaco-editor

jest.config.js

module.exports = {
  moduleNameMapper: {
    "monaco-editor": "<rootDir>/__mocks__/monacoMock.js"
  }
};

I then added enough to monacoMock.js to fit my purposes (but others will have other needs).

module.exports = {
  languages: {
    register: function(language) {},
    setMonarchTokensProvider: function(name, tokens) {},
    registerCompletionItemProvider: function(name, provider) {}
  },
  editor: {
    defineTheme: function(name, theme) {}
  }
};

[epicfaace]

Here’s the solution that worked for me: https://github.com/react-monaco-editor/react-monaco-editor/issues/133#issuecomment-403960502