dimanche 21 juillet 2019

How to test Vue.js plugin function that return a document element?

I create a simple Vue.js plugin, and want to test that with npm and jest. One function should return a document element by id, but it return always null. Why is that and how can i fix it?

// plugintest.js

const PluginTest = {
    install(Vue, options) {
        Vue.mixin({
            methods: {
                getBool: function() { return true; },
                getElem: function(id) { return document.getElementById(id); }
            }
        });
    }
}

export default PluginTest;

//plugintest.spec.js

let Vue = require('vue/dist/vue')
import PluginTest from './plugintest.js';

Vue.use(PluginTest);

describe("plugintest.js", () => {

    test('test functions', () => {
        const wrapper = new Vue({
            template: '<div id="div1">Hello, World!</div>' }).$mount();

        expect(wrapper.getBool()).toBe(true);
        expect(wrapper.getElem()).not.toBe(null); // FAIL!!!
    });
});


Error message:

expect(received).not.toBe(expected) // Object.is equality

    Expected: not null

      19 |
      20 |         expect(wrapper.getBool()).toBe(true);
    > 21 |         expect(wrapper.getElem()).not.toBe(null);
         |                                       ^
      22 |     });
      23 | });
      24 |

      at Object.toBe (plugintest.spec.js:21:39)

Aucun commentaire:

Enregistrer un commentaire