Skip to content

Update jest ignore patterns to include gitlab ui and bootstrap vue

David O'Regan requested to merge jest-unexpected-synatx-gitlab/ui into master

When importing @gitlab/ui we get a unexpected token error from jest around the import statements in the gitlab/ui components i.e. the ES6 code.


FAIL tests/unit/example_spec.js
   ● Test suite failed to run
     /builds/gitlab-org/status-page/node_modules/@gitlab/ui/dist/components/base/button/button.js:1
     ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { BButton } from 'bootstrap-vue/esm/index.js';
                                                                                              ^^^^^^
     SyntaxError: Cannot use import statement outside a module
       1 | <script>
     > 2 | import GlButton from '@gitlab/ui/dist/components/base/button/button';
         | ^
       3 | import GlBadge from '@gitlab/ui/dist/components/base/badge/badge';
       4 | 
       5 | export default {
       at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
       at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
       at src/components/list_item.vue:2:1
       at Object.<anonymous> (src/components/list_item.vue:34:3)
 Test Suites: 1 failed, 1 total

To solve the issue we need to:

You will need to tell Jest to compile @gitlab/ui by whitelisting it in the transformIgnorePatterns option in out Jest config.

See here for a example of someone facing the same issue via a react lib.

https://stackoverflow.com/a/55803188

Edited by David O'Regan

Merge request reports

Loading