Testing with Vue Test Utils

[katherine-boost]

Step by step scenario

When testing (with Vue Test Utils) MyComponent.vue, a component that uses Vue.Draggable, I was getting the persistent error TypeError: parseInt is not a function,

TypeError: parseInt is not a function
        at new Sortable (/path/to/node_modules/sortablejs/Sortable.js:540:25)
        at VueComponent.options (/path/to/node_modules/vuedraggable/dist/webpack:/vuedraggable/src/vuedraggable.js:215:55)

Although the Vue.Draggable component works fine for the user, in the test suite, window.parseInt was undefined.

Actual Solution

I checked your own specs and saw the way that you're mocking out Sortable, so I've done the same in my tests (and now working!)

import Sortable from 'sortablejs';
jest.genMockFromModule('sortablejs');
jest.mock('sortablejs');
const SortableFake = {
  destroy: jest.fn(),
  option: jest.fn()
};
Sortable.mockImplementation(() => SortableFake);

import MyComponent from 'components/MyComponent.vue'

Expected Solution

There's no mention of testing in the README - I think it could be valuable to include a short section noting that you'll need to mock out Sortable in your component spec.
I can probably write this up if you agree that it's useful.

Cheers!

[David-Desmaisons]

@katherine-boost Thanks for the feedback and the proposal. I am thinking as the README.md is already quite big maybe creating a dedicated .md file under the documentation folder and adding a link from the README will be a good solution. Out-of curisoty, did you try to use a mock for the draggable component itself? If so why was it not a good solution?

[katherine-boost]

FWIW, I don't mind long READMEs - your call though.

I wasn't testing the Draggable component itself - it was used within a component I was testing.
So I'm not sure about mocking out the draggable component in that circumstance. Disclaimer, I'm pretty inexperienced with Vue testing and indeed Vue itself, so could be missing the obvious.

[titantwentyone]

This is an old issue but I am also lookiing to test my own components which employ Vue Draggable. Would be great to have a guide on how this can be done. Happy to help with this if needed. Again, I'm not an expert when it comes to testing with Vue but willing to help.