qustion:how to test esri-loader with jest

[webmapLee]

i want to know how to test esri-loader with jest,when i test esri-loader with jest , throw timeout errors, like:

my function:

async function arcgisApiRequests<T extends unknown[]>(
  modulePaths: string[],
  loadModuleOptions?: ILoadScriptOptions
): Promise<T> {
  const modules: unknown[] = []
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  let moduleMap = (window as any).moduleMap
  const loadModulePaths: string[] = []
  const loadModuleIndex: number[] = []
  if (moduleMap) {
    modulePaths.forEach((modulePath, i) => {
      const module = moduleMap.get(modulePath)
      if (module) {
        modules[i] = module
      } else {
        loadModulePaths.push(modulePath)
        loadModuleIndex.push(i)
      }
    })
    if (loadModulePaths.length === 0) return modules as T
    const loadedModules = await loadModules(loadModulePaths, loadModuleOptions)
    loadModuleIndex.forEach((index, i) => {
      modules[index] = loadedModules[i]
      moduleMap.set(loadModulePaths[i], loadedModules[i])
    })
    return modules as T
  } else {
    moduleMap = new Map<string, unknown>()
    const modules = await loadModules(modulePaths, loadModuleOptions)
    modulePaths.forEach((modulePath, i) => {
      moduleMap.set(modulePath, modules[i])
    })
    window['moduleMap'] = moduleMap
    return modules as T
  }
}

my test case:

import { arcgisApiRequests } from '../src/arcgis'
import arcgisApiPaths from '../src/arcgis/arcgis-api-paths'
describe('加载 arcgis api 测试用例', () => {
  test('arcgis api调用', async () => {
    const modulePaths = [
      arcgisApiPaths.Map,
      arcgisApiPaths.FeatureLayer,
      arcgisApiPaths.FeatureLayerView,
    ]
    const loadedModules = await arcgisApiRequests(modulePaths)
    expect(loadedModules[0]).toBeTruthy()
  }, 20000)
})

my tsconfig.json

{
    "compilerOptions": {
      "target": "ES2020",
      "module": "ESNext",
      "lib": ["ESNext", "DOM"],
      "moduleResolution": "node",
      "strict": true,
      "sourceMap": true,
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noImplicitReturns": true,
      "preserveConstEnums": true,
      "suppressImplicitAnyIndexErrors": true,
      "experimentalDecorators": true,
      "strictPropertyInitialization": false,  
      "noImplicitAny": true,
      "jsxImportSource": "preact",
      "types": ["arcgis-js-api"],
      "allowJs": true
    },
    "include": ["src/**/*","examples/**/*"],
    "exclude": ["node_modules"]
  }

my jest.config.js

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  testMatch: ['**/tests/*.(spec|test).(js|ts)'],
  transform: {
    '^.*\\.(tsx?|js)$': 'ts-jest',
  },
  transformIgnorePatterns: [
    'node_modules/(?!\\.pnpm/)(?!(@arcgis|@esri|@stencil|@popperjs)/)'
  ],
  moduleFileExtensions: ['json', 'js', 'jsx', 'ts', 'tsx'],
  extensionsToTreatAsEsm: ['.ts'],
  collectCoverageFrom: ['**/*.{js|ts}', '!**/node_modules/**', '!**/vendor/**'],
  collectCoverage: true,
  coverageThreshold: {
    global: {
      branches: 50,
      functions: 50,
      lines: 50,
      statements: 50,
    },
  },
}

[webmapLee]

it can't work when use aysnc/await,but loadModules return a Promise...

[andygup]

Hi @webmapLee you'll need to provide a simple github repo that reproduces the problem. This looks like you are mixing ES modules from @arcgis/core with our ArcGIS CDN, which uses AMD modules, along with TypeScript types from arcgis-js-api. Note that combining ESM with AMD modules within a single application won't work. https://developers.arcgis.com/javascript/latest/tooling-intro/#compare-amd-and-es-modules.

I'm not sure what framework you are using, but here's a Angular/TypeScript/Jest example using @arcgis/core: https://github.com/andygup/angular-jsapi-jest

[webmapLee]

now i can run esri-loader/loadModules test case with jest, but i can only use it like this:

test('arcgis 模块调用', () => {
    arcgisApiRequests(['esri/Map']).then((loadedModules) => {
        console.log(loadedModules)
    })
  })

i can't use async await,like this:

test('arcgis 模块调用', async () => {
    const [Map] = arcgisApiRequests(['esri/Map'])
    console.log(Map)
  })

[nel11211]

I don't know if this is the same, but on ArcGIS Charts we get the following error running jest: TypeError: utils.Promise is not a constructor.

I believe it is happening because of this line in the esri-loader repo.

Which only uses window['Promise'] when running in the browser, otherwise the utils.Promise is set to undefined, which results in the type error seen above.

Is there workaround available on our end, or any way this could be changed on your end to allow using esri-loader with jest?

[andygup]

@nel11211 we'll need a repro case. I'm not familiar with ArcGIS Charts, are they running the latest version of the ArcGIS JS API?

[nel11211]

@nel11211 we'll need a repro case. I'm not familiar with ArcGIS Charts, are they running the latest version of the ArcGIS JS API?

We are using arcgis-js-api@next (version is 4.23.0-next.20220316), and esri-loader version 3.3.0. The simplest description of our repro is something like this:

• Set up a Jest unit test that imports loadModules from esri-loader and calls await loadModules(...) at some point.
• Run the unit test in Jest, throws error: TypeError: utils.Promise is not a constructor.

[andygup]

Closing.