@kitware/vtk.js + Jest = Cannot use import statement outside a module

Web
1

Hi, I’m trying to write some Jest tests on a Create React App project, but when I try to import any @kitware/vtk.js module and run my Jest tests I get the following error:

Cannot use import statement outside a module

I tried to add the node module to transformIgnorePatterns:

"transformIgnorePatterns": [
  "node_modules/(?!(@kitware)/)"
],

but it doesn’t seem to help at all (unlike it happens with other node modules that had the same issue).

Do you have any suggestion to use @kitware/vtk.js and Jest together?

2

Does this thread solve your issue?

3

I am getting this error but adding type: ‘module’ to package.json does not seem to help. Should I be adding something else to the jest.config.d?

Error:

....

    Details:

    /host/node_modules/vtk.js/Sources/IO/XML/XMLImageDataReader/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import vtkXMLReader from 'vtk.js/Sources/IO/XML/XMLReader';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 |
    > 2 | import vtkXMLImageDataReader from 'vtk.js/Sources/IO/XML/XMLImageDataReader';
        | ^

Test:

import vtkXMLImageDataReader from 'vtk.js/Sources/IO/XML/XMLImageDataReader';
test('mytest', done => {
  console.log('My test has been called')
  done();
});

jest.config.js

module.exports = {
    transform: {
      "^.+\\.jsx?$": "babel-jest"
    }
}
4

Hi, you’ll need to add vtk.js to jest’s transformIgnorePatterns:

transformIgnorePatterns: [
  '/node_modules/(?!@kitware/vtk.js)'
]
5

Hi, thanks for the suggestion however I am still getting the same error

jest.config.js

module.exports = {

    transform: {
      "^.+\\.jsx?$": "babel-jest",
    },
    transformIgnorePatterns: [
      '/node_modules/(?!@kitware/vtk.js)'
    ],
}

vtk.js is installed (using npm) under node_modules/@kitware/vtk.js. Is there something else I can check?

6

Do you have a babel.config.js? This is more of an environment issue with jest.

7

I have a .bablerc

{
  "presets":['@babel/preset-env'],
}

Thanks for your help. In case you have not guessed I am pretty new to jest

8

Update I got it working with the following changes

1- Using the jsdom test environment, and importing using the full path

/**
 * @jest-environment jsdom
 */
import vtkXMLImageDataReader from '@kitware/vtk.js/IO/XML/XMLImageDataReader.js';

test('mytest', done => {
  console.log('My test has been called')
  done();
});

I could not get it to import from just @kitware/vtk.js

2- Changing .babelrc to babel.config.json.

I expect there is a better or more ellegant solution though.