Using vaadin-grid with Jest & TypeScript?

Flow
1

I’m trying to import vaadin grid in a TypeScript class like this (with Aurelia Framework)

import ‘@vaadin/vaadin-grid/vaadin-grid’;

Everything works fine so far, except when I use the class in a Unit test, Jest complains:

 /home/thomas/projects/eiswind/aurelia-proto/frontend/node_modules/@vaadin/vaadin-grid/vaadin-grid.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './theme/lumo/vaadin-grid.js';

Some research say I have to transform it, so I tried adding a transform in package.json

"transform": {
      "^.+\\.ts$": "ts-jest",
      "^.*/@vaadin/vaadin-grid/.*\\.js$" : "ts-jest"
    },

But still the same error.

Any help would be great, as I’m stuck with this.

2

Any update on this? We’re getting a similar error when trying to use Vaadin components with Jest inside a Nx project:

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

   ...

    Details:

    /Users/oak/source/hmx/hudsonmx-fe/node_modules/@vaadin/vaadin-accordion/src/vaadin-accordion.js:6
    import { PolymerElement } from '@polymer/polymer/polymer-element.js';
           ^

    SyntaxError: Unexpected token {

    > 1 | import { AccordionElement } from '@vaadin/vaadin-accordion/src/vaadin-accordion';
        | ^
      2 | 
      3 | export class HmxAccordion extends AccordionElement { }
      4 | 

      at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (../../libs/shared/ui/hmx-web/src/lib/components/accordion/accordion.component.ts:1:1)
3

Any update about this ? I’m trying to test Vaadin components in a Vue-cli project using Jest.

I added Vaadin to the transformIgnorePatterns in my Jest configuration

transformIgnorePatterns: [
	'<rootDir>/node_modules/(?!@vaadin/.*)',
],

but I am still getting an error :

  ● Test suite failed to run

    ReferenceError: customElements is not defined
      at Object.<anonymous> (node_modules/@vaadin/vaadin-lumo-styles/version.js:7:1)
      at Object.<anonymous> (node_modules/@vaadin/vaadin-lumo-styles/color.js:1:1)
      at Object.<anonymous> (node_modules/@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field-styles.js:1:1)
      at Object.<anonymous> (node_modules/@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js:1:1)
      at Object.<anonymous> (node_modules/@vaadin/vaadin-text-field/vaadin-text-field.js:1:1)
      at src/components/MyForm.vue:1084:3
      at Object.<anonymous> (src/components/MyForm.vue:1241:3)
      at src/views/Page.vue:460:50
      at Object.<anonymous> (src/views/Page.vue:538:3)
      at Object.<anonymous> (tests/unit/some.test.js:5:1)

Thanks !

4

Hello. Jest is using jsdom as a node.js browser emulation. This is a reason of the errors.

[jsdom 16.2]
(https://github.com/jsdom/jsdom/releases/tag/16.2.0) added support for custom elements. Jest has not been updated to use it yet, but AFAIK it should be possible to override version used by Jest to a more recent one.

In our projects, we are using karma to test our components in the actual browsers. Users don’t open the pages in jsdom (neither PhantomJS or anything like that). We recommend [karma-esm]
(https://open-wc.org/testing/karma-esm.html) plugin.