CODEWITHSUNDEEP
unit-testingvue.jsnpmjestjsbabeljs
bgriffin
bgriffin

Reputation: 3

Jest failing to even run a test suite for component that imports async function

I have moved a project from angularjs to Vue. After moving it I am trying to add in unit tests with jest. I have put tests around some smaller components and services and they work as expected with no issues. I am now trying to add tests a some slightly more complex components and now I am getting an error just for that test suite. The error is as follows.

E:\Development\work\project\node_modules\@babel\runtime\helpers\esm\asyncToGenerator.js:17
    export default function _asyncToGenerator(fn) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

The component I am trying to test has a couple of data properties and child components.

The basic gist is 

<template>
<div>
  <div v-if="allowed">...</div>
  <ChildComponent />
</div>

<script>
  import ChildComponent from './ChildComponent';
  import {getIsAllowed} from './allowed.service.js';

  export default {
    name: 'Parent',
    data() {
      return {
        allowed: getIsAllowed();
      }
    }
</script>

There is more, but it is not relevant to the issue I am facing.

The ChildComponent is where the issue comes in. It is similar to as follows. 

<template>
<div>...</div>
</template>

<script>
import {functionThatCallsAyncFunction} from 'fileThatContainsAsyncFunctions'
</script>

My test script is as follows

import {mount} from '@vue/test-utils';
import Parent from './Parent';

describe('my tests', () => {
  test('verify tests run', () => {
    expect(true).toBe(true);  
  })
})

This causes the error I am seeing.

I can remove the import of Parent to get rid of the error.

I can also remove the import of the child component from the parent to fix the error.

I can also remove the import of the function that calls the async function in the Child to fix the error.

And I can change the function from async/await to use .then() and it will work.

shallowMount and stubs have no effect, as the test bombs before it gets to that point.

There must be something I am missing that is making the async functions fail to run at all. I have been messing with this for 2 days now and google has provided many ideas, but none that have worked.

my relevant package.json parts

"scripts" : {
  "test": "jest --config=jest.conf.js"
},
"devDependencies" : {
    "@babel/core": "^7.1.6",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "@vue/babel-preset-app": "^3.11.0",
    "@vue/test-utils": "^1.0.0-beta.26",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6",
    "babel-loader": "^8.0.4",
    "jest": "^23.6.0",
    "jest-serializer-vue": "^2.0.2",
    "vue-jest": "^3.0.1"
}

jest.conf.js is simple 

const {defaults} = require('jest-config');
module.exports = {
  moduleFileExtensions: [...defaults.moduleFileExtensions, 'vue'],
  transform: {
    ".*\\.(vue)$": "vue-jest",
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  'setupFiles': ['./tests/setup.js']
};

as is my babel.config.js

module.exports = {
  presets: [
    '@vue/app',
    ['@babel/preset-env', {targets: { node: 'current'}}],
  ],
};

if any other info is needed, I would be happy to provide it. This is driving me up the wall. Hopefully someone has some ideas to help get this working as I would expect it to.

Thanks in advance.

Upvotes: 0

Views: 1547

Answers (1)

AlexMA
AlexMA

Reputation: 10202

You might try telling Jest to transpile the offending node module. See https://github.com/facebook/jest/issues/2550#issuecomment-381718006 for full explanation. 

  transformIgnorePatterns: [
    '/node_modules/(?!transpile-me|transpile-me-too).+(js|jsx)$'
  ],

And https://jestjs.io/docs/en/configuration.html#transformignorepatterns-arraystring

Upvotes: 1

Related Questions