karma＆jasmine＆browserify狀態泄漏？

Question

我有兩個karma測試（對於vuejs），如果它們自己運行，它們可以正常工作，但是，如果我將它們作爲套件的一部分運行，那麼其中一個會失敗。

我很新的JS測試，所以我懷疑有一個問題，導入共享莫名其妙？！儘管這似乎有點奇怪。

無論如何，這裏有兩個測試，如果有人能解釋爲什麼他們不在一起工作，我很樂意聽到它。

import Vue from 'vue' 
import CastList from '../../../frontend/components/Cast-List.vue' 

describe('CastList2.vue',() => { 
    var vm; 
    var component; 

    beforeEach(() => { 
    CastList.data = function() { 
     return { 
     initialFetchComplete: true, 
     refreshable: true 
     } 
    }; 
    vm = new Vue({ 
     template: '<div><test v-ref:component></test></div>', 
     components: { test: CastList } 
    }).$mount(); 

    component = vm.$refs.component; 
    }) 

    it('should have a refresh button', (done) => { 
    expect(vm.$el.querySelector('button[name=refresh]')).toBeTruthy(); 
    component.refreshable = false; 
    component.$nextTick(() => { 
     expect(vm.$el.querySelector('button[name=refresh]')).toBeFalsy(); 
     done(); 
    }); 
    }); 
}); 

和...

import Vue from 'vue' 
import CastList from '../../../frontend/components/Cast-List.vue' 

describe('CastList.vue',() => { 
    var vm; 
    var component; 

    beforeEach(() => { 
    CastList.data = function() { 
     return { 
     initialFetchComplete: true, 
     refreshable: false 
     } 
    }; 
    vm = new Vue({ 
     template: '<div><test v-ref:component></test></div>', 
     components: { test: CastList } 
    }).$mount(); 

    component = vm.$refs.component; 
    }) 

    it('should have a refresh button', (done) => { 
    expect(vm.$el.querySelector('button[name=refresh]')).toBeFalsy(); 
    component.refreshable = true; 
    component.$nextTick(() => { 
     expect(vm.$el.querySelector('button[name=refresh]')).toBeTruthy(); 
     done(); 
    }); 
    }); 
}); 

我karma.conf看起來是這樣的：

// https://github.com/Nikku/karma-browserify 
module.exports = function (config) { 
    config.set({ 
    browsers: ['PhantomJS'], 
    frameworks: ['browserify', 'jasmine'], 
    files: ['spec/frontend/**/*.js'], 
    reporters: ['spec'], 
    preprocessors: { 
     'spec/frontend/**/*.js': ['browserify'] 
    }, 
    browserify: { 
     debug: true, 
     // needed to enable mocks 
     plugin: [require('proxyquireify').plugin] 
    }, 
    // if you want to continuously re-run tests on file-save, 
    // replace the following line with `autoWatch: true` 
    singleRun: true 
    }) 
} 

我命名這兩個測試文件 「鑄名錄」 和 「嗒嗒」並看着錯誤消息，似乎這兩個文件是衝突的。

1) should not have a refresh button 
    CastList2.vue 
    Expected null to be truthy. 
/var/folders/tz/9v8nv4t92mq5np77n3tqgr_00000gn/T/057de4a9f4398d04398e527f6243d941.browserify:14898:68 <- spec/frontend/unit/Cast-List.spec.js:28:4 
/var/folders/tz/9v8nv4t92mq5np77n3tqgr_00000gn/T/057de4a9f4398d04398e527f6243d941.browserify:14856:11 <- spec/frontend/unit/Blah.spec.js:28:6 
/var/folders/tz/9v8nv4t92mq5np77n3tqgr_00000gn/T/057de4a9f4398d04398e527f6243d941.browserify:5218:14 <- node_modules/vue/dist/vue.common.js:470:0 
nextTickHandler@/var/folders/tz/9v8nv4t92mq5np77n3tqgr_00000gn/T/057de4a9f4398d04398e527f6243d941.browserify:5193:16 <- node_modules/vue/dist/vue.common.js:445:0 

我認爲這個問題是，我被壓倒進口CastList ES6模塊導入和modules are live not copies有點邪。

Answer 1

將您的描述更改爲具有不同的名稱。當你在兩個不同的文件中放置相同的描述名稱時，它會將這兩個文件合併在一起，所以你最終會在beforeEach中產生衝突（因爲描述可能只有一個beforeEach），因此其中一個測試失敗。