Unit testing in vuejs

So first thing you didn't need to enable the end to end testing in your project. I would say start fresh

$ npm install -g vue-cli$ vue init webpack vue-testing? Project name vue-testing? Project description A Vue.js project? Author Tarun Lalwani <tarun.lalwani@payu.in>? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Set up unit tests Yes? Pick a test runner karma? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recommended) yarn

Say N to Setup e2e tests with Nightwatch and use Karma for the Pick a test runner.

$ npm test> vue-testing@1.0.0 test /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/vue-testing> npm run unit> vue-testing@1.0.0 unit /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/vue-testing> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run07 04 2018 21:35:28.620:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/07 04 2018 21:35:28.629:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency07 04 2018 21:35:28.645:INFO [launcher]: Starting browser PhantomJS07 04 2018 21:35:32.891:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket M1HeZIiOis3eE3mLAAAA with id 44927405  HelloWorld.vue    ✓ should render correct contentsPhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.061 secs / 0.041 secs)TOTAL: 1 SUCCESS=============================== Coverage summary ===============================Statements   : 100% ( 2/2 )Branches     : 100% ( 0/0 )Functions    : 100% ( 0/0 )Lines        : 100% ( 2/2 )================================================================================

Now your npm test would work fine.

According to the error logs you provide here, the failing tests that you spot are the End to End ones. Indeed, by executing the command npm test e2e you're testing using Nightwatch. See under /tests/e2e/specs. Here you should have a default test file checking that your Vue application properly create a DOM element identified as app.

The test should be the following:

// For authoring Nightwatch tests, see// http://nightwatchjs.org/guide#usagemodule.exports = {  'default e2e tests': function (browser) {    // automatically uses dev Server port from /config.index.js    // default: http://localhost:8080    // see nightwatch.conf.js    const devServer = browser.globals.devServerURL    browser      .url(devServer)      .waitForElementVisible('#app', 5000)      .assert.elementPresent('.hello')      .assert.containsText('h1', 'Welcome to Your Vue.js App')      .assert.elementCount('img', 1)      .end()  }}

In your case this test is failing because you have probably removed the file named App.vue that is generated through vue-cli scaffolding. The error you get is because the above test checks, with a 5 seconds timeout, if a DOM node named "app" is rendered (i.e.: .waitForElementVisible('#app', 5000)).

Basically it is failing because you actually do not provide this div in your application anymore (due of App.vue removal, maybe).

So you have two options here:

• restoring the App.vue file (i.e.: create a div identified as 'app' where you mount a Vue instance);

• editing the end to end according to your needs.

Hope this helps!