在vuejs中进行单元测试

Question

我正在尝试为Vuejs配置/运行我的第一个单元测试.但我无法克服配置问题.我已经尝试安装库但由于某种原因我不断收到错误.

以下是我的代码示例:

我的目录结构:

   hello/
     dist/
     node_modules/
     src/
      components/
        hello.vue
     test/
      setup.js
      test.spec.js
    .babelrc
     package.json
     webpack.config.js

我文件里面的内容

SRC /组件/ hello.vue

<template> <div> {{message}} </div> </template>
<script>
export default {
  name: 'hello',
  data () { return message: 'Hi' },
  created () {
    // ...
  }
}

测试/ setup.js

// setup JSDOM
require('jsdom-global')()

// make expect available globally
global.expect = require('expect')

测试/ test.spect.js

import { shallow } from 'vue/test-utils'
import  { hello} from '../../../src/components/hello.vue'

describe('hello', () => {
  // just testing simple data to see if it works
  expect(1).toBe(1)
})

.babelrc

{
  "env": {
    "development": {
      "presets": [
        [
          "env",
          {
            "modules": false
          }
        ]
      ]
    },
    "test": {
      "presets": [
        [
          "env",
          {
            "modules": false,
            "targets": {
              "node": "current"
            }
          }
        ]
      ],
      "plugins": [
        "istanbul"
      ]
    }
  }
}

的package.json

...
  "scripts": {
    "build": "webpack -p",
    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
  },
"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "cross-env": "^5.1.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.5.0",
    "vue-template-compiler": "^2.5.9",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7",
    "jsdom": "^11.3.0",
    "jsdom-global": "^3.0.2",
    "mocha": "^3.5.3",
    "mocha-webpack": "^1.0.0-rc.1",
    "nyc": "^11.4.1",
    "expect": "^21.2.1",
    "@vue/test-utils": "^1.0.0-beta.12"
  },
  ...
"nyc": {
    "include": [
      "src/**/*.(js|vue)"
    ],
    "instrument": false,
    "sourceMap": false
  }

最后我的webpack.config.js ......

if(process.env.NODE_ENV == "test") {
  module.exports.externals = [ require ('webpack-node-externals')()]
  module.exports.devtool = 'inline-cheap-module-source-map'
}

现在,当我npm test从我的根文件夹运行时,我hello/收到此错误:

> hello@1.0.0 test C:\Users\john\vue-learn\hello
> npm run e2e


> hello@1.0.0 e2e C:\Users\john\vue-learn\hello
> node test/e2e/runner.js

Starting selenium server... started - PID:  12212

[Test] Test Suite
=====================

Running:  default e2e tests
 × Timed out while waiting for element <#app> to be present for 5000 milliseconds.  - expected "visible" but got: "not found"
    at Object.defaultE2eTests [as default e2e tests] (C:/Users/john/Google Drive/lab/hello/test/e2e/specs/test.js:13:8)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)


FAILED:  1 assertions failed (20.281s)

 _________________________________________________

 TEST FAILURE:  1 assertions failed, 0 passed. (20.456s)

 × test

   - default e2e tests (20.281s)
   Timed out while waiting for element <#app> to be present for 5000 milliseconds.  - expected "visible" but got: "not found"
       at Object.defaultE2eTests [as default e2e tests] (C:/Users/john/Google Drive/lab/hello/test/e2e/specs/test.js:13:8)
       at _combinedTickCallback (internal/process/next_tick.js:131:7)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello@1.0.0 e2e: `node test/e2e/runner.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello@1.0.0 e2e 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!     C:\Users\john\AppData\Roaming\npm-cache\_logs\2018-04-03T23_53_15_976Z-debug.log
npm ERR! Test failed.  See above for more details.

我不知道为什么会这样.当我首先安装我的webpack项目时,我没有使用npm init命令安装测试库,所以没有冲突,但我仍然得到了这个错误:

更新(赏金后)

我只是想测试我的vuejs应用程序.希望与茉莉/业力.如果有人知道如何将这些集成到一个简单的应用程序并运行第一次测试,我可以从那里采取它.我的问题不是编写测试而是配置它

Answer 1

因此，首先您不需要在项目中启用端到端测试。我会说重新开始

\n\n

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

\n\n

说NtoSetup e2e tests with Nightwatch并使用Karmafor Pick a test runner。

\n\n

$ npm test\n\n> vue-testing@1.0.0 test /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/vue-testing\n> npm run unit\n\n\n> vue-testing@1.0.0 unit /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/vue-testing\n> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run\n\n07 04 2018 21:35:28.620:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/\n07 04 2018 21:35:28.629:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency\n07 04 2018 21:35:28.645:INFO [launcher]: Starting browser PhantomJS\n07 04 2018 21:35:32.891:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket M1HeZIiOis3eE3mLAAAA with id 44927405\n\n  HelloWorld.vue\n    \xe2\x9c\x93 should render correct contents\n\nPhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.061 secs / 0.041 secs)\nTOTAL: 1 SUCCESS\n\n\n=============================== Coverage summary ===============================\nStatements   : 100% ( 2/2 )\nBranches     : 100% ( 0/0 )\nFunctions    : 100% ( 0/0 )\nLines        : 100% ( 2/2 )\n================================================================================\n

\n\n

现在你npm test可以正常工作了。

\n