Search code examples
javascripttypescriptjestjsmockingsystemjs

Jest cannot read property 'import' of undefined

I have the following code to load a dependency asynchronously:

declare global {
  interface Window {
    System: System.Module
  }
}

const fooService = window.System.import('@internal/foo-service').then(module => module.FooService)
//                              ^ Jest trips up here

async function func1() {
  (await fooService).doBar()
  …
}

async function func2() {
  (await fooService).doBar2()
  …
}

This works fine thanks to Bergi but Jest is tripping up over window.System.import and gives me the error Cannot read property 'import' of undefined. How can I properly mock this?

Solution

  • The window property can be mocked like that:

    import { System } from 'systemjs'

Object.defineProperty(window, 'System', { value: System })

    For some reason I can't explain, this needs to happen before the import (!) of the component that is being tested.