Jest 22.x support

[cristijora]

Version

1.0.0-beta.10

Reproduction link

Do not have one yet

Steps to reproduce

Upgrade to latest jest > 22.0.0
Try to select svg specific attributes by class

wrapper.find('.some-class')

Where the wrapper contains path or rect elements

<path class="some-class"></path>

or

<rect class="some-class"></rec>

What is expected?

Find method to return the selected elements

What is actually happening?

Find returns no elements. Querying by tag
find('path') seems to work but it's more of a workaround

---

I also get a strange issue on a test but haven't isolated it yet to see where the problem actually is

TypeError: Cannot read property 'split' of undefined
      
      at getTransitionInfo (node_modules/vue/dist/vue.runtime.common.js:6840:58)
      at whenTransitionEnds (node_modules/vue/dist/vue.runtime.common.js:6810:13)
      at node_modules/vue/dist/vue.runtime.common.js:7037:11
      at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:592:19)

getTransitionInfo seems to use getComputedStyles which probably changed in the new jsdom version that the latest jest is using.

[eddyerburgh]

Can someone create a reproduction in a GitHub repo?

[dannynicolas]

I ran into a similar issue with SVG and based on my searching, it is a JSDOM / javascript issue with SVGs, not necessarily vue-test-utils or jest. I haven't looked into this since the early betas, so I'll take another look after updating to beta.11

The workaround I did was to attach to document and look at the HTML to confirm that it actually rendered the svg.
eg.

test('the d3 svg chart renders with the component', () => {
    const wrapper = mount(D3Chart, {
      attachToDocument: true,
    });
    expect(wrapper.html()).to.contain('svg');
  });

[cristijora]

Reproduction repo https://github.com/cristijora/vue-test-utils-jest-example
Jest 21

• Find path by class name
• Find by path by tag

Jest 22

• Find path by class name
• Find path by tag
  😆

as @dannynicolas says, this is most likely a JSDOM issue since jest 22 uses a newer JSDOM version

[eddyerburgh]

Thanks for the repro 😀

I looked into this, and I'm going to close this as a JSDOM issue—jsdom/jsdom#2128

[Prior99]

I cannot see how this can be closed with the related jsdom issue. This does not only affect SVGs but also transitions as mentioned above.

[cristijora]

@Prior99 Indeed transitions are also affected but didn't dig too deep into it to get an exact answer why that happens.

[Prior99]

@cristijora is it somehow possible to stub the transitions to have a working workaround except for downgrading to jest 21 until a fix in jsdom or vue-test-utils has been published?

[cristijora]

@Prior99 I didn't spend too much time on that and left my deps to jest 21

[Prior99]

Is there really nothing which can be done to work around this? The JSDOM issue has been open for over half a year now with no signs of being worked on. In the meantime projects using Vue need to stay 2 major versions of Jest behind.