Модульное тестирование в vuejs
Я пытаюсь настроить / запустить мой первый модульный тест для 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. Надеюсь, с жасмином / кармой. Если кто-нибудь знает, как интегрировать их в простое приложение и запустить первый тест, я могу взять его оттуда. Моя проблема не в написании тестов, а в настройке
2 ответа
Итак, во-первых, вам не нужно было включать тестирование в вашем проекте. Я бы сказал, начать с нуля
$ 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
Сказать N в Setup e2e tests with Nightwatch и использовать Karma для 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-run
07 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 concurrency
07 04 2018 21:35:28.645:INFO [launcher]: Starting browser PhantomJS
07 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 contents
PhantomJS 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 )
================================================================================
Теперь ваш npm test будет работать нормально.
Согласно журналам ошибок, которые вы здесь предоставили, неудачные тесты, которые вы обнаружите, являются сквозными. Действительно, выполнив команду npm test e2e вы тестируете с помощью Nightwatch. Смотрите под /tests/e2e/specs, Здесь у вас должен быть тестовый файл по умолчанию, проверяющий, что ваше приложение Vue правильно создает элемент DOM, обозначенный как app,
Тест должен быть следующим:
// For authoring Nightwatch tests, see
// http://nightwatchjs.org/guide#usage
module.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()
}
}
В вашем случае этот тест не пройден, потому что вы, вероятно, удалили файл с именем App.vue это произведено через леса vue-cli. Ошибка, которую вы получаете, заключается в том, что вышеупомянутый тест с 5-секундным таймаутом проверяет, отображается ли узел DOM с именем app (то есть: .waitForElementVisible('#app', 5000)).
В основном это происходит сбой, потому что вы на самом деле больше не предоставляете этот div в своем приложении (возможно, из-за удаления App.vue).
Итак, у вас есть два варианта здесь:
восстановление файла App.vue (то есть: создайте div, идентифицируемый как "app", где вы монтируете экземпляр Vue);
редактирование от конца до конца в соответствии с вашими потребностями.
Надеюсь это поможет!