custom-elements break jest

[jan-capiak]

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

Are you reporting a bug or a feature?

• Bug
• Feature

Problem

Testing custom elements (patterns-library components) with jest throws an error.
The problem is that jsdom doesnt support custom elements.
Github issue on jsdom: jsdom/jsdom#1030

What is then the way to test your application with patterns-library components?
Thanks

[AndyOGo]

@jan-capiak
Thanks for your issue.
That's correct custom-elements aren't supported by jsdom so far.

But we use custom-element polyfills, which should work for jsdom too.
Though we have to test this, because I never tried it.

jsdom

If you try in your test-setup and make sure it comes after jsdom:

// ES2015 Custom Element Polyfill
import 'document-register-element';
// load this for browsers which support customElements without builtin (webkit)
import '@ungap/custom-elements-builtin';

Virtual DOM

Next you may face issues with snapshot-testing done by Jest or Enzym.
Because they deal with virtual DOM, and custom elements are DOM not V-DOM.
Furthermore Jest and Enzym implement their own V-DOM render functionality to support shallow snapshots 💣

So in a worst case scenario we have to rewrite withReact to return null if it is used within a test environment 🚀
Though maybe null is too aggressive and <div {...props}>{children}</div> would fit better.
But still, how do we differentiate from test-environment of our users and our own tests, which should be running inside React 🤔

Manually triggering Events

Jest and Enzym support to test events by manually/artificially triggering them.
How about this with ce?

Please let us know if that helps.

PS: you should have those polyfills available because they come with the patterns-library and they are in our peerDependencies.

[AndyOGo]

Same issue for aletheia

[LucaMele]

@jan-capiak yes if u add polyfills it should work

[AndyOGo]

@jan-capiak
@LucaMele
@MKaHead
Please read my update above regarding Jest and Enzyme:

Next you may face issues with snapshot-testing done by Jest or Enzym.
Because they deal with virtual DOM, and custom elements are DOM not V-DOM.
Furthermore Jest and Enzym implement their own V-DOM render functionality to support shallow snapshots 💣

So in a worst case scenario we have to rewrite withReact to return null if it is used within a test environment 🚀

[AndyOGo]

@jan-capiak
@LucaMele
We should have a reproduction repo

[jan-capiak]

Thank you @AndyOGo for help 👍
Importing this import 'document-register-element'; in jest config solved the issue with customElements is undefined.

Another issue is with withReact .
When i import patterns-library component without withReact and then test that component, it works, but not with withReact.

Can there be some fix/workaround in patterns-library withReact for that?

[AndyOGo]

@jan-capiak
Thank you for your feedback.

It would very awesome if we could see the whole code causing your issue.
May I asked you to share a reproduction repo?

[jan-capiak]

Please see this testing-repo and try it as described in Readme.
https://github.com/jan-capiak/testing-repo

[MKaHead]

I could reproduce the Problem in the "testing-repo" @jan-capiak, but I couldn't debug it there, the problem coming by "pattern library" internally.

Recently I played around with a testing environment for "patterns library". So I setup Jest and React in similar way than in the "testing repo".

I got the same Error Message with more input. I got this Error:
TypeError: Cannot read property ‘1’ of null
vendor.js > requestAnimationFrame function

const prefix = (Array.prototype.slice.call(styles).join('').match(regexVendorPrefix) || (styles.OLink === '' && ['', 'o']))[1];

const dom = ('WebKit|Moz|MS|O').match(new RegExp(`(${prefix})`, 'i'))[1];

The question is now my reproduction correct?

For example the "dropdown" use the custom "RAF" function.Therefore in the "testing repo" I comment out all components in the "ui-components" except the "Button" component (build again) and in the "project one" I did similar removed all components in the "Start" component except the "Button component". -> It worked

• The custom "RAF" have to be refactored so that is stable and testable.

A easy solution like check of undefined and return null, will not work because the custom "RFA" need a valid vendor.

@AndyOGo wrote me allready to maybe use some kind of polyfill.

but maybe this not the only problem, for the error.

[AndyOGo]

Thanks @MKaHead

@LucaMele
@jan-capiak
Yes indeed, we face maybe a bigger problem here.
Because we have more than one functionality which needs to deal with cross-browser issues.

And please be aware that jsdom only implements a subset of the DOM API

[LucaMele]

Closing as V2 is released. If issue is still relevant in v2, please re-open