Skip to content

Make Jest work with gitlab-ui

Currently when you are testing a component in Jest that uses gitlab-ui, you get an error similar to this:

 FAIL  spec/frontend/notes/components/discussion_jump_to_next_button_spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/winnie/Projects/gdk-ce/gitlab/node_modules/@gitlab/ui/dist/index.js:112896
    export { Chart$1 as GlChart, area as GlAreaChart, ChartTooltip as GlChartTooltip, link as GlLink, GlLoadingIcon, modal as GlModal, pagination as GlPagination, Popover as GlPopover, progress_bar as GlProgressBar, skeleton_loading as GlSkeletonLoading, GlButton, tooltip$1 as GlTooltip, empty_state as GlEmptyState, GlFormInput, search_box as GlSearchBox, dropdown_item as GlDropdownItem, dropdown_header as GlDropdownHeader, dropdown_divider as GlDropdownDivider, dropdown as GlDropdown, table as GlTable, Modal as GlModalDirective, Tooltip as GlTooltipDirective };
    ^^^^^^

    SyntaxError: Unexpected token export

      1 | <script>
      2 | import icon from '~/vue_shared/components/icon.vue';
    > 3 | import { GlTooltipDirective } from '@gitlab/ui';
        | ^
      4 |
      5 | export default {
      6 |   name: 'JumpToNextDiscussionButton',

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue:3:1
      at Object.<anonymous> (app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue:31:3)

It is probably sufficient to add this to our Jest config:

"transformIgnorePatterns": [
  "node_modules/(?!(@gitlab/ui)/)"
]