Testing with Jest

[Dashti81]

Hi,

I'm using crypto-es in an angular (v12) project, and it works fine. However when I run the test I get this error:

Details:
    /.../node_modules/crypto-es/lib/enc-base64.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import {
                                                                                                                                                 ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { HttpParams } from '@angular/common/http';
      2 | import { Injectable } from '@angular/core';
    > 3 | import { Base64 } from 'crypto-es/lib/enc-base64.js';
        | ^
      4 | import { SHA256 } from 'crypto-es/lib/sha256.js';

I try already a couple of day's to solve this issue, but without any success.

Thanks

[donni106]

same kind of problem for me in a react native project:

/node_modules/crypto-es/lib/index.js:1
    import {
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import CryptoES from 'crypto-es';

edit: it works for me with adding crypto-es to the jest transformIgnorePatterns.

[Dashti81]

Hi @donni106,

Thank you for your response.

I tried your solution, but I don't know if I did correctly.

I added transformIgnorePatters to jest.config.js:

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  collectCoverage: true,
  coverageReporters: ['json', 'lcov', 'html'],
  coverageDirectory: 'test-results/coverage',
  transform: {},
  transformIgnorePatterns: ['/node_modules/', '/node_modules/crypto-es', 'crypto-es],
  reporters: [
    'default',
    [
      'jest-html-reporters',
      {
        publicPath: './test-results/result-overview',
        filename: 'results.html',
        pageTitle: 'Web application test results'
      }
    ]
  ],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
    prefix: '<rootDir>/src'
  })
};

Is this what you have in your jest config?

Dashti

[donni106]

@Dashti81 is can see a missing ' at the end of your array for transformIgnorePatterns. in overall it looks good to me. maybe it is enough to pass transformIgnorePatterns: ['/node_modules/crypto-es'],

my config is a bit different and uses regular expressions for multiple modules at the same time:

transformIgnorePatterns: ['node_modules/(?!(jest-)?react-native|crypto-es)']

but should work the same way at the end.

[1antares1]

At the moment, I didn't find another solution for this similar to lodash-es where I could use moduleNameMapper to map it with the previous lodash.

What I did was declare an any type to fix the case temporarily for my tests (remember delete previous import):

declare const CryptoES: any;

Or else, you could create their more extended type class and use theirs by fetching the crypto-es signatures.

[entronad]

The type system has been updated in v2.0.0, all js files have own d.ts now. And the jest tests are in TypeScript now.

And the config files of this lib have updated for ts-jest, I suggest to refer to them when you get ts or esm problems in jest.