Vue.js example code
TunaYagci opened this issue · 6 comments
We really require this plugin for Vue.js, but I don't know how to proceed.
Hey Tuna. I am not too familiar with Vue.js, but maybe someone else will read this issue who can help you.
Keep in mind that testing frontend components might be tricky. I once tried it with React components, but didn‘t get far. Can‘t tell you the exact reason anymore, but I think that rendering the component and unmounting it didn‘t free the memory completely again and it seemed like React itself or maybe JSDOM was the source of trouble, not the component.
Testing code that does not require the DOM is definitely easier, but feel free to give it a try 😉
Thank you for your kind comment :)
I'll definitely try this but I need to find a way to automatize heap dumping first. Do you have any experience with that?
Edit: Wait, this library does that too!
Yeah, even if you should only be able to write always-failing tests, the heap output might still be helpful 👍
Okay, another question: we cannot see the object properties from heap output, right? (As in chrome debugger) I'm trying to figure out which VueComponents exactly leaked. I can see it from chrome heap by looking at object properties in the dump.
You will see the object prototypes. If you make sure the objects in question have a distinct prototype, you should be able to tell.
@TunaYagci Maybe Drool is what you are looking for.
This project depends on node-memwatch, which is a Node addon written in C++ to do snapshot on NodeJS V8 engine; therefore, it's quite hard to integrate with front-end memory testing.
Since Vue Components have their life cycles, handlers for user interaction and data bindings, it might contain quite a lot of noise.
I take a peek at Drool and it says it requires chromedriver to work. Maybe it is the right heap to snashot, i.e. the js heap of the browser, while this package snapshots for the js heap in NodeJS V8 engine.