openlayers: Openlayers doesn't work with Angular+JEST

Describe the bug I have an Angular application that is attempting to use openlayers (7.1.0) inside an Angular component. However, any unit test that imports the module in which the component is defined fails with the following error:

import BaseObject from './Object.js';
    ^^^^^^

SyntaxError: Cannot use import statement outside a module

  1 | import { Component, OnInit } from '@angular/core';
> 2 | import Map from 'ol/Map';
    | ^
  3 | import View from 'ol/View';
  4 | import { GisBaseLayer } from 'src/app/gis/models/gis-base-layer';
  5 | import { GisLayer } from '../../models/gis-layer';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)

I have tried adding '/node_modules/(?!(ol|geotiff)).+\\.js$' or 'node_modules/(?!(ol)/)' to my jest.config.js, but it makes no difference. The test still fails with the same error.

To Reproduce

Create an angular application with a module containing a component that uses an openlayers map (ng generate component my-map).
Attempt to run the auto-generated unit test with JEST
Test fails with the above error

Expected behavior Ability to use openlayers in an Angular application with jest unit tests.

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 3
Comments: 26 (6 by maintainers)

Most upvoted comments

@mkelly1495 This simple regex saved me many hours! Thank you @mprins!

transformIgnorePatterns: [
  'node_modules/(?!(.*\\.mjs$|ol|observable-fns|quick-lru|nanoid))',
],

vkrepkiy on Dec 9, 2022

This is driving us mad. We can not figure out how to configure Jest to allow tests that include OpenLayers imports.

We are using Jest 28 and OpenLayers 6.5.0 but, as I’m reading here, the OpenLayers version does not make any difference.

Can someone help and prioritize this, please?

Thanks

aalbericio on Jan 26, 2023

We use Angular + OpenLayers and Jest just fine in https://github.com/B3Partners/tailormap-viewer

mprins on Nov 10, 2022

Hello all,

This may help anyone that faces this same issue:

In jest.preset.js:

moduleNameMapper: {
        '^ol/(.*)$': 'node_modules/.compiled/ol/$1.js',
}

In jest.config.ts:

moduleDirectories: [
        'node_modules/.compiled',
        'node_modules'
]

Before running any test (pretest script in package.json):

"ol-prepare": "npx babel node_modules/ol --extensions .js --out-dir node_modules/.compiled/ol --presets @babel/preset-env",

So, you get the idea:

Transpile OL into a “.compiled” folder
Configure Jest to also rely on that folder
Configure Jest to map ol names against that folder

It works for us, and we have used this same approach for quite a few other libraries.

I hope this helps!

aalbericio on May 18, 2023

Hi! We have the same problem when using react and openlayers (we get the error "SyntaxError: Cannot use import statement outside a module") and we got this when bumping to openlayers 8.2.0 but version 8.1.0 works fine.
In the release notes it says “Nothing special is required when upgrading from 8.1. Only TypeScript users might have to make minor changes, because some types have been made more strict.” but since I do not get any build errors and if I remove the tests related to OpenLayers I can run the application with no problems it does not feel like its typescript related. I have read the comments/solutions in this issue and tried some of them… but I do not understand what has changed in 8.2.0 that would require changes in any jest/babel configs… /Hans

hoaol on Jan 2, 2024

Hello,

This configuration should work for almost all imports in OL:

'^ol(.*)$': 'node_modules/.compiled/ol$1.js',

But it’s also true that is does not work with imports exported from @types/ol root index file like (Feature, etc):

import { Feature } from 'ol'

I’ve been reading a bit more, and the author seems to have deprecated @types/ol:

https://www.npmjs.com/package/@types/ol?activeTab=versions

So, I suggest you to rewrite those (only) imports to something like:

import Feature from 'ol/Feature

Which seems to be an accepted way of doing the import (even though some IDEs will automatically go for the wrong one in this case).

Give it a try!

aalbericio on Jun 1, 2023

Hi @jahow , I’m working hand in hand with @aalbericio in the same issue.

We figured out what is exactly producing the issue. This a very simple function:

import { Coordinate } from 'ol/coordinate';
import { Polygon } from 'ol/geom';

export function coordinatesToGeometry(): any {
    return new Polygon(null as Coordinate[][]);
}

When doing a simple unit test invoking such function, it is failing. This is jest output:

    ^^^^^^

    SyntaxError: Unexpected token 'export'

      2 | import { Polygon } from 'ol/geom';
      3 |
    > 4 | export function coordinatesToGeometry(): any {
        |                ^
      5 |     return new Polygon(null as Coordinate[][]);
      6 | }
      7 |

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1796:14)
      at Object.<anonymous> (src/lib/core/utils/utils.ts:4:16)

As you can see the problem comes with imports from “ol/geom”. Nevertheless, errors do not happen with the imports from “ol/coordinate”, which are working fine.

Appreciate you can help us 🙏

ricardojbertolin on Jan 26, 2023