Setting up Monaco with Jest
Published in
1 min readOct 8, 2019
1. Transform Monaco with jest-babel.
Monaco uses ESM to reduce bundle size. However, Jest does not currently support ESM, so we need to compile Monaco using babel-jest . Jest will ignore node_modules by default, which you can override with the transformIgnorePatterns option.
// jest.config.jstransformIgnorePatterns: [
‘/node_modules/(?!monaco-editor).+\\.js$’
]
2. Change .bablerc to babel.config.js
If you are using .bablerc to configure bable, change this to babel.config.js and export the config using module.exports . Check out this resource to read more about why:
https://github.com/facebook/jest/issues/6053#issuecomment-383632515
3. Mock the canvas element
yarn add jest-canvas-mock -D// jest.config.js
setupFiles: ['<rootDir>/jest.setup.js'],// jest.setup.js
require('jest-canvas-mock')
