Vue показывает журнал ошибок в Karma, но Karma не показывает неудачный тест

Я пытаюсь написать модульные тесты для компонентов Vue в нашем новом проекте.

Я использую Karma с Mocha + Chai и PhantomJS в качестве браузера.

Моя тестовая команда cross-env BABEL_ENV=test karma start client/test/unit/karma.conf.js --single-run

Пожалуйста, дайте мне знать, если вам нужно увидеть karma conf или код самого компонента. (Я не упомянул об этом, так как его сложно и долго обрезать, и я почти уверен, что проблема не в компоненте).

Мой тестовый код выглядит следующим образом:

import Vue from 'vue'
import SendEmail from '@/components/SendEmail'

describe('SendEmail.vue', () => {
  it('should render correct contents', (done) => {
    const Constructor = Vue.extend(SendEmail)
    const vm = new Constructor({
      propsData: {
        email: '{{test}}',
        template: {},
      }
    }).$mount()
    expect(vm.$el.querySelector('.section h5').textContent)
    .to.equal('Template Variables')
    done()
  })
  it('should create inputs based off context in input', (done) => {
    const Constructor = Vue.extend(SendEmail)
    const vm = new Constructor({
      propsData: {
        email: '<p> hello bob {{test}} </p>',
        template: {},
      }
    }).$mount()
    vm._watcher.run()
    Vue.nextTick(()=>{
        expect(vm.$el.querySelector('.input-field #test')).to.be.null;
        done()
    })
  })
})

Проблема в том, что независимо от того, является ли тест «он должен создавать входные данные на основе контекста во входных данных» expect...to.be.null или expect...to.not.be.null, тест отображается как «пройденный» в карме.

ожидать...to.be.null

 cross-env BABEL_ENV=test karma start client/test/unit/karma.conf.js --single-run

03 01 2018 16:15:50.637:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
03 01 2018 16:15:50.639:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
03 01 2018 16:15:50.665:INFO [launcher]: Starting browser PhantomJS
03 01 2018 16:15:50.949:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket SD3YIlvnm7q7SpXMAAAA with id 69225830

  SendEmail.vue
    ✓ should render correct contents
    ✓ should create inputs based off context in input

PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.053 secs / 0.012 secs)
TOTAL: 2 SUCCESS

ожидать...быть.не.нулевым

cross-env BABEL_ENV=test karma start client/test/unit/karma.conf.js --single-run

03 01 2018 16:15:29.471:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
03 01 2018 16:15:29.473:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
03 01 2018 16:15:29.509:INFO [launcher]: Starting browser PhantomJS
03 01 2018 16:15:30.105:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket AIFlufSWBVUaXMD7AAAA with id 50204600

  SendEmail.vue
    ✓ should render correct contents
    ✓ should create inputs based off context in input

PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.03 secs / 0.019 secs)
TOTAL: 2 SUCCESS

Вот странный момент: vue, похоже, выдает ошибку из-за неудачного утверждения, которая отображается в виде журнала ошибок для теста expect...to.be.null. (поскольку это ЯВЛЯЕТСЯ состоянием реальности - результат не нулевой).

ERROR LOG: '[Vue warn]: Error in nextTick: "AssertionError: expected <input placeholder="" id="test" type="text"> to be null"'
ERROR LOG: AssertionError{message: 'expected <input placeholder="" id="test" type="text"> to be null', showDiff: false, actual: <input placeholder="" id="test" type="text">, expected: undefined, stack: 'AssertionError@http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae:9320:24
assert@http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae:239:31
http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae:1087:16
propertyGetter@http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae:7784:33
http://localhost:9876/base/index.js?a3d01b46a2e8d6dea408b15b7f752ca119ad7183:23805:63
http://localhost:9876/base/index.js?a3d01b46a2e8d6dea408b15b7f752ca119ad7183:5405:16
flushCallbacks@http://localhost:9876/base/index.js?a3d01b46a2e8d6dea408b15b7f752ca119ad7183:5326:14', line: 243, sourceURL: 'http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae'}

Как сделать, чтобы Karma перехватывала эти неудачные утверждения и отображала их как неудачные тесты, а не отображала их как журналы ошибок vue?


javascript unit-testing vue.js karma-mocha chai
person Caleb Jay    schedule 04.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это может быть или не быть причиной вашей проблемы, но это все же ошибка, которую стоит исправить. Если ваш тест содержит асинхронную операцию (в данном случае nextTick), вам нужно объявить параметр done, а затем вызвать done(), когда ваша асинхронная операция && завершится. Chai определит, объявлен ли этот параметр или нет. Если он обнаружит это, Chai узнает, что ваш тест завершен, когда будет вызван done().

it('should create inputs based off context in input', done => {
    const Constructor = Vue.extend(SendEmail)
    const vm = new Constructor({
      propsData: {
        email: '<p> hello bob {{test}} </p>',
        template: {},
      }
    }).$mount()
    vm._watcher.run()
    Vue.nextTick(()=>{
        expect(vm.$el.querySelector('.input-field #test')).to.be.null;
        done();
    })
  })
person Eric Guan    schedule 04.01.2018
comment
Спасибо, я пытался правильно понять бит done(), но не понял, что это аргумент для функции it(). Тем не менее, я все еще получаю ту же проблему. На этот раз тесты на самом деле терпят неудачу, но причина в тайм-ауте кармы, и vue регистрирует фактический вывод mocha/chai (или карму? Не уверен). - person Caleb Jay; 04.01.2018