Reproduce Jest Type Error

[AndyOGo]

Starting a new CRA project with npx create-react-app foo, using reactified @axa-ch/button and writing a shallow test for it throws TypeError: The custom element constructor's prototype is not an object.

Related source code of webcomponentsjs polyfill:
https://github.com/webcomponents/polyfills/blob/75717f84bbb6ba165dacbf6c406da5845bcb9664/packages/custom-elements/src/CustomElementRegistry.js#L168-L173

How to reproduce?

1. clone this repo and checkout this git branch reproduce/jest-pblib-type-error
2. run npm run test
3. throws TypeError: The custom element constructor's prototype is not an object.

Checklist Jest and Plib v2

• install needed polyfills as described here

  • @axa-ch/patterns-library-polyfill for plib v2 components
  • mutationobserver-shim

• use Jest configuration as described at this commit

• setup Jest to use those polyfills

• setup Jest to use Enzyme Adapter for React 16

• Setup Jest transform files for css, js and other file types

• Add displayName property to reactified @axa-ch/button for Snapshots and Enzyme as described here

• shallow render reactified @axa-ch/button component

Error Log

> [email protected] test /Users/axawinterthur/dev/jest-test-plib-v2
> node scripts/test.unit.js --env=jsdom

 PASS  src/App.test.js
  ● Console

    console.warn node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:229
      Custom Elements: `Element#insertAdjacentElement` was not patched.

 FAIL  src/components/AXAButton.test.js
  ● Test suite failed to run

    TypeError: The custom element constructor's prototype is not an object.

      1 | import { createElement } from 'react';
    > 2 | import createAXAButtonReact from '@axa-ch/button/lib/index.react';
        | ^
      3 |
      4 | const AXAButtonReact = createAXAButtonReact(createElement);
      5 |

      at af (node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:203:218)
      at Object.<anonymous> (src/components/AXAButton.js:2:1)
      at Object.<anonymous> (src/components/AXAButton.test.js:5:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.02s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `node scripts/test.unit.js --env=jsdom`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/axawinterthur/.npm/_logs/2019-10-21T16_51_11_039Z-debug.log

[LucaMele]

Hier it works same example: https://github.com/axa-ch/patterns-library-examples/tree/master/create-react-app. Must be a tiny difference what makes it brake here

[LucaMele]

@AndyOGo If you need support, please make a meeting. I don't have time ATM to debug your code

[AndyOGo]

Version analysation

I analyzed the package-lock.json files of both projects and compared installed versions.
Any different version is highlighted as bold, all versions are linked to the line in the relating lock file.

Module	Patterns-Library-Exmaple CRA	This Repo
@axa-ch/patterns-library-polyfill	1.4.16	1.5.0
mutationobserver-shim	0.3.3	0.3.3
@webcomponents/webcomponentsjs	2.2.10	2.3.0
react-scripts	3.0.1	3.2.0
@axa-ch/button	2.0.2	2.0.10
@jest/core	24.9.0	24.9.0
enzyme	3.10.0	3.10.0
enzyme-adapter-react-16	1.15.1	1.15.1

[AndyOGo]

Alright, I started digging down the prototype chain, and if I’m correct 2 different Object constructors are being used inside or outside of webcomponents-bundle.js:

f = c.prototype;
var fObjectProto = f.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__;
var fObjectProtoCtor = fObjectProto.constructor;

console.log(c);  // ->  [Function: AXAIcon]
console.log(c instanceof Object);  // -> true
console.log(f);  // ->  AXAIcon [HTMLElement] {}
console.log(f instanceof Object);  // -> false
console.log(Object);  // -> [Function: Object]
console.log(fObjectProtoCtor);  // -> [Function: Object]
console.log(fObjectProtoCtor === Object);  // -> false
console.log(fObjectProto);  // -> {}
console.log({} instanceof Object);  // -> true
console.log(fObjectProto instanceof Object);  // -> false
console.log(fObjectProto instanceof fObjectProtoCtor);  // -> false

Log Output:

 console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3495
    [Function: AXAIcon]

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3496
    true

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3497
    AXAIcon [HTMLElement] {}

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3498
    false

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3499
    [Function: Object]

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3500
    [Function: Object]

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3501
    false

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3502
    {}

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3503
    true

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3504
    false

  console.log node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js:3505
    false

[AndyOGo]

Mitigation of breaking @webcomponents/webcomponentsjs provieded at #2