CODEWITHSUNDEEP
javascriptnode.jsvue.js
GuruVenkatesh R
GuruVenkatesh R

Reputation: 37

TypeError: Super expression must either be null or a function

I'm very new to unit Testing in vue js. I just went through this website to learn unit testing "https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-mocha-webpack". while I'm practicing the examples in "mocha-webpack" I got this Error

WEBPACK  Failed to compile with 1 error(s)
Error in ./src/Counter.vue
TypeError: Super expression must either be null or a function
at /opt/htdocs/guru/unitTest_prct/node_modules/prettier/index.js:32893:5
at /opt/htdocs/guru/unitTest_prct/node_modules/prettier/index.js:32913:4
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `mocha-webpack --webpack-config  webpack.config.js --require test/setup.js test/**/*.spec.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely     additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-09-06T10_28_47_073Z-debug.log

Can anyone tell me how to solve this error. This is my Counter.vue file

<template>
  <div>
   <div>
     {{ count }}
     <button @click="increment">Increment</button>
   </div>
  </div>
</template>

<script>
export default {
    data () {
       return {
         count: 0
       }
    },
   methods: {
      increment () {
        this.count++;
      }
    }
};
</script>

Here is my Counter.spec.js File

import { shallowMount } from '@vue/test-utils'
import Counter from '../src/docs/Counter.vue'
describe('Counter.vue', () => {
  it('increments count when button is clicked', () => {
    const wrapper = shallowMount(Counter)
    wrapper.find('button').trigger('click')
    expect(wrapper.find('div').text()).toMatch('1')
  })
})

Upvotes: 1

Views: 5321

Answers (2)

wataru
wataru

Reputation: 1090

I've looked at the issue linked above.

I have --require test/setup.js in the test script. Here's how it looks like:

require('jsdom-global')();
window.Date = Date;

It solved the problem. Try it out!

Upvotes: 7

P3trur0
P3trur0

Reputation: 3225

It is a problem related with version 1.14.1 of prettier, that is a NPM package used in your scenario.

Indeed, looking at their GitHub repo the issue is reported. At the moment there is a possible workaround: basically, it is to comment out line 32893 of prettier/index.js.

In your environment you can find the file here: /opt/htdocs/guru/unitTest_prct/node_modules/.

Upvotes: 2

Related Questions