[Bug] Test error: Package may have incorrect main/module/exports?

[billpliske]

Reproducible in vscode.dev or in VS Code Desktop?

• [x] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [x] Not reproducible in the monaco editor playground

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

Reproduction Steps

1. npm create vue@latest
2. Turn on typescript, and vitest (at the very least).
3. Create a simple EditorComponent.vue file inside the views directory.

<script setup lang="ts">
import { onMounted, ref, type Ref } from 'vue'
import * as monaco from 'monaco-editor'

const editorContainer: Ref<HTMLElement | null> = ref(null)

onMounted(() => {
  if (editorContainer.value) {
    monaco.editor.create(editorContainer.value, {
      value: '// Start coding here!',
      language: 'javascript',
      theme: 'vs-dark',
    })
  }
})
</script>

<template>
  <div ref="editorContainer" style="height: 400px"></div>
</template>

Add this to your router index file:

 path: '/monaco',
      name: 'monaco',
      component: () => import('../views/EditorComponent.vue'),
    },

Create the following test file:

// EditorComponent.spec.ts
import { mount } from '@vue/test-utils'
import EditorComponent from '@/views/EditorComponent.vue'
import { editor } from 'monaco-editor'
import { describe, expect, it, vi } from 'vitest'

vi.mock('monaco-editor', () => ({
  editor: {
    create: vi.fn(),
  },
}))

describe('EditorComponent.vue', () => {
  it('renders the editor container', () => {
    const wrapper = mount(EditorComponent)
    expect(wrapper.find('div[ref="editorContainer"]').exists()).toBe(true)
  })

  it('calls monaco.editor.create on mount', () => {
    mount(EditorComponent)
    expect(editor.create).toHaveBeenCalled()
  })

  it('passes the correct parameters to monaco.editor.create', () => {
    const wrapper = mount(EditorComponent)
    const editorContainer = wrapper.find('div[ref="editorContainer"]').element as HTMLElement
    expect(editor.create).toHaveBeenCalledWith(editorContainer, {
      value: '// Start coding here!',
      language: 'javascript',
      theme: 'vs-dark',
    })
  })
})

Run tests in your VSCode terminal: npx vitest --coverage

Actual (Problematic) Behavior

Test failure.

FAIL src/components/EditorComponent.test.ts [ src/components/EditorComponent.test.ts ] Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json. Plugin: vite:import-analysis File: /Users/bill/Documents/CODE/vue-monaco-test/src/components/EditorComponent.test.ts:4:0 6 | const vi_import_0 = await import("@vue/test-utils"); 7 | const vi_import_1 = await import("@/components/EditorComponent.vue"); 8 | const vi_import_2 = await import("monaco-editor"); | ^ 9 |
10 |

Expected Behavior

Successful test. This is even keeping us from mocking the test out. (unless we're doing something REALLY wrong ... if so, I'll take the hit, lol)

Additional Context

No response

[keithjgrant]

This seems to be a long-standing problem. There are some workarounds to get monaco working in vitest environments, but I'm having mixed success using them:

• https://github.com/vitest-dev/vitest/discussions/1037
• https://github.com/vitest-dev/vitest/discussions/1806 (this one works for me but logs An error occurred while trying to read the map file at marked.umd.js.map)

There are also a variety of 3rd-party plugins, such as the vite-plugin-monaco-editor package, and again, I've had mixed success with them. It seems ridiculous that a Microsoft-supported package requires so many hacky workarounds in the community

[billpliske]

Appreciate the reply, @keithjgrant

[billpliske]

Still haven't got this working on my end yet. I might have to switch over to Jest and see if that makes a difference.

[WwwHhhYran]

Still haven't got this working on my end yet. I might have to switch over to Jest and see if that makes a difference.

Jest still has this problem, and I think it's a monaco-editor problem, not a testing framework problem.