Testing with Jest fails to import monaco

See original GitHub issue

Hi,

First of all, I鈥檓 sorry if this is not the right place. I鈥檓 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. 馃槂

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

7reactions
manstiscommented, Dec 2, 2020

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) {}
  }
};
6reactions
epicfaacecommented, Jun 7, 2019
Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot test jest with monaco editor - unexpected token
The import statement as suggested in the docs for lazy loading modules from monaco leads to the esm folder, which jest is not...
Read more >
Support `monaco-editor` in Jest (#119194) 路 Issues - GitLab
Test suite failed to run Cannot find module 'monaco-editor' from 'editor_spec.js' > 1 | import { editor as monacoEditor } from聽...
Read more >
jest cannot find module 'monaco-editor'
Error : Cannot find module 'C:\Users\Me\my_app.js' then you are most likely trying to run the wrong file. It is possible you are missing...
Read more >
TypeScript Jest: Cannot use import statement outside module
The TypeScript jest error "Cannot use import statement outside module" occurs when we misconfigure jest in a TypeScript project and run test files...
Read more >
Frontend testing 路 Testing guide 路 Development 路 Help 路 GitLab
We use Jest for JavaScript unit and integration testing, and RSpec feature tests with ... It does not make sense to test our...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found