Node modules not being parsed correctly for tests?

Question

I'm working in an application and am trying to add a testing framework to automate testing across the app. I'm using Vue, Electron, TypeScript, and Node and am having trouble getting any test that actually uses components to run. For some reason Jest doesn't seem to want to work with the node modules... I have had very little luck finding anything online that points to ways to fix this.

Anyone with any knowledge on the subject who has any pointers or ideas on how to resolve the issue with importing these node modules while running the tests would be greatly appreciated. I can't imagine that this is impossible to do but there really isn't much I can find through my searches.

Error:

$ npm run test

> [email protected] test C:\Users\daniel\Desktop\MDC\mdc
> jest --detectOpenHandles

FAIL src/app/features/mdc-window/mdc-window.component.test.ts
  ● 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:

    C:\Users\daniel\Desktop\MDC\mdc\node_modules\bootstrap-vue\es\components\modal\modal.js:3
    import bBtn from '../button/button';
    ^^^^^^

    SyntaxError: Unexpected token import

    > 1 | import bModal from 'bootstrap-vue/es/components/modal/modal'
        | ^
      2 | import bTooltip from 'bootstrap-vue/es/components/tooltip/tooltip'
      3 | import throttle from 'lodash.throttle'
      4 | import Vue from 'vue'

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/app/features/mdc-window/mdc-window.component.ts:1:1)
      at Object.<anonymous> (src/app/features/mdc-window/mdc-window.component.test.ts:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        9.13s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest --detectOpenHandles`
npm ERR! Exit status 1

jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  verbose: true,
  testPathIgnorePatterns: [
    '/build/',
    '/config/',
    '/data/',
    '/dist/',
    '/node_modules/',
    '/test/',
    '/vendor/'
  ],
  globals: {
    'ts-jest': {
      tsConfig: './src/app/tsconfig.json'
    }
  }
}

test.ts

import { expect } from 'chai'
import 'jest'
import { MDCWindowComponent } from './mdc-window.component'

const mdcWindowComponent = new MDCWindowComponent()

describe('Test: Set Title Function', () => {
  it('should set the variable title to the passed variable', () => {
    const title = 'this is a test'
    mdcWindowComponent.setTitle(title)
    expect(mdcWindowComponent.title).to.equal(title)
  })

tsconfig

{
  "compilerOptions": {
    "allowJs": true,
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "node",
    "target": "ES2017",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "lib": ["es2017", "dom"]
  },
  "include": [
    "**/*",
    "../types/**/*",
    "../../node_modules/bootstrap-vue/**/*",
    "../../node_modules/electron/**/*"
  ]
}

relevant packages

"@types/jest": "^23.3.9",
"jest": "^23.6.0",
"ts-jest": "^23.10.4",

Answer 1

To fix this specific error

SyntaxError: Unexpected token import

I fixed this using the following jest.config.js

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  testEnvironment: 'node',
  verbose: true,
  moduleDirectories: ['node_modules', 'src'],
  modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
  moduleFileExtensions: ['js', 'ts', 'json', 'node'],
  transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
  testPathIgnorePatterns: [
    '/build/',
    '/config/',
    '/data/',
    '/dist/',
    '/node_modules/',
    '/test/',
    '/vendor/'
  ],
  globals: {
    'ts-jest': {
      tsConfig: './src/app/tsconfig.json'
    },
    NODE_ENV: 'test'
  }
}

Note

preset: 'ts-jest/presets/js-with-ts',

transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],

this seemingly was what helped fix the issue, though if you compare the jest.config.js in this answer to my response i did add a few other options which may also be helpful for others.

A healthy amount of reading on the ts-jest config documentation, jest config documentation, and tsconfig documentation does wonders.