CODEWITHSUNDEEP
javascriptvue.jsecmascript-6jestjs
scniro
scniro

Reputation: 16989

Babel/Jest: Issues exporting default class

Am trying to test the following with jest and am experiencing an issue that looks related to babel, specifically, exporting a default class. Consider the following...

export default class Test {
  get() {
    return {}
  }
}

With a test setup as such...

import Test from './test'

describe('test', () => {
  it('should', () => {
    // [...]
  });
});

Fails with the following error...

node_modules/@babel/runtime-corejs2/helpers/esm/classCallCheck.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){export default function _classCallCheck(instance, Constructor) { ^^^^^^

SyntaxError: Unexpected token export

This is a vue web app. I have the following configuration...

// babel.config.js
module.exports = {
  presets: ['@vue/app', '@babel/env']
};

// jest.config.js
module.exports = {
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**'
  ],
  coverageDirectory: '.coverage',
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.js$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  testMatch: [
    '<rootDir>/src/**/*.spec.js'
  ],
  transformIgnorePatterns: ['<rootDir>/node_modules/']
};

Finally, my test script...

// package.json
[...]
"test": "jest"
[...]

This is driving my nuts, as all of my .vue files and tests work perfectly fine. I am only experiencing issues on some of my core .js files that use this above specific syntax.

How can I resolve this?

Upvotes: 1

Views: 2134

Answers (1)

scniro
scniro

Reputation: 16989

I ended up removing @vue/app as a preset. This seemed inconsequential, as all of my vue testing remained working as expected with @babel/env. My Config resulted in the following...

// babel.config.js
module.exports = {
  presets: ['@babel/env']
};

I find this somewhat of an anti-climatic answer. I did not delve into what @vue/app may have been doing to cause this observed behavior, but apparently nothing that I need to continue forward.

Upvotes: 3

Related Questions