admin管理员组

文章数量:1327524

I'm very new to unit Testing in vue js. I just went through this website to learn unit testing "". while I'm practicing the examples in "mocha-webpack" I got this Error

WEBPACK  Failed to pile 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 plete 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')
  })
})

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/guides/#testing-single-file-ponents-with-mocha-webpack". while I'm practicing the examples in "mocha-webpack" I got this Error

WEBPACK  Failed to pile 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 plete 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')
  })
})
Share Improve this question edited Sep 6, 2018 at 12:32 GuruVenkatesh R asked Sep 6, 2018 at 10:48 GuruVenkatesh RGuruVenkatesh R 372 silver badges8 bronze badges 4
  • Can you post your Counter.vue file? – yuriy636 Commented Sep 6, 2018 at 10:52
  • @ yuriy636 I have updated my counter.vue file – GuruVenkatesh R Commented Sep 6, 2018 at 11:31
  • can we see your imports, please? – P3trur0 Commented Sep 6, 2018 at 12:22
  • @P3trur0 here I add my Counter.spec.js file – GuruVenkatesh R Commented Sep 6, 2018 at 12:33
Add a ment  | 

2 Answers 2

Reset to default 7

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!

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 ment out line 32893 of prettier/index.js.

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

本文标签: javascriptTypeError Super expression must either be null or a functionStack Overflow