title: Testing Vue components that utilize cytoscape.js?
body: <p>I am working on something that involves cytoscape.js and Vue.js. I am currently using jest.js for unit testing the Vue components. A lot of my components have their funtionality tied to a cytoscape graph that is mounted on a container.</p>
  
  <p>This is how my test files look like: </p>
  
  <pre><code>import graph from "@/graph.vue"
  
  import {
      mount,
      createLocalVue,
  } from "@vue/test-utils"
  
  const localVue = createLocalVue();
  
  describe('graph.vue', () =&gt; {
  
      it('should center the graph', () =&gt;{
          const wrapper = mount(graph, {
              localVue,
          })
          const button = wrapper.find('btn')
          expect(wrapper.vm.Cytoscape())).toHaveBeenCalled(0)
          button.trigger('click')
          expect(wrapper.vm.Cytoscape()).toHaveBeenCalled(1)
      })
  }) 
  </code></pre>
  
  <p>If it uses any cytoscape, it gives the following error: </p>
  
  <pre><code>Cannot read property 'className' of null
  
        11 | // run(): Startup-Function
        12 | export function run() {
      &gt; 13 |   cy = cytoscape({
           |        ^
        14 | 
        15 |     container: document.getElementById('cy'), // container to render in
        16 |     //builds graph 
        17 | }
  </code></pre>
  
  <p>I suspect that I have the wrong approach or even testing environment for this. What am I missing ?</p>
  
  <p>Edit: I have found an alternative solution to the problem. Instead of unit testing with jest, there are many things that I needed to test that I could also test in E2E testing. I currently use Cypress to do that.</p>