Lit-element: [docs] Add info on testing

[yanishoss]

Description

Live Demo

https://stackblitz.com/edit/lit-element-example?file=index.js

https://glitch.com/edit/#!/hello-lit-element?path=index.html:1:0

Steps to Reproduce

Expected Results

Actual Results

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 11
• [ ] Safari 10
• [ ] IE 11

Versions

• lit-element: vX.X.X
• webcomponents: vX.X.X
  I got a problem while testing my library (github.com/yanishoss/polymer-toolkit) with Jest.

Jest doesn't support ES6 modules and @polymer/lit-element is not compiled,
thereby i got this message:

FAIL tests/redux.test.ts
● Test suite failed to run
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.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/travis/build/yanishoss/polymer-toolkit/node_modules/@polymer/lit-element/lit-element.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { PropertiesMixin } from '@polymer/polymer/lib/mixins/properties-mixin.js';
^
SyntaxError: Unexpected token {

1 | import { html } from '@polymer/lit-element';
| ^
2 | import { Dispatch } from 'redux';
3 | import { ReduxLitElement } from '../src';
4 | import { IAction, IState, store, Type } from './store';
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object. (tests/redux.test.ts:1:1)

[ernsheong]

You might have to explore https://github.com/Polymer/tools/tree/master/packages/web-component-tester instead to test web components.

[Kirtscheva]

I have almost same problem. Mine is connected to I18nSwitcher. I use TypeScript and i am thinking that somehow .ts is not transform correctly, I tried different ways, but nothing clear the fail. Please if someone have something in mind, share...

[Lodin]

@yanishoss, @Kirtscheva, do you use any Jest transformers to like babel-jest or ts-jest to convert import tokens to require to make Jest work?

UPD: Also, do you aware that jsdom don't support WebComponents specification yet? In the case you don't I would recommend to use WebComponent tester as @ernsheong mentioned above or to take a look at karma with puppeteer (connected through karma-chrome-launcher) to test them in latest headless Google Chrome.

[Kirtscheva]

Hello, @Lodin, I use Jest transformer ts-jest. Strange thing is that I have some tests, that for sure are working with Mocha and Chai. But now when I migrated from Mocha to Jest I have this issue.
By the way, it is not only this problem... Module i18n (Language Switcher) was perfectly working with Mocha test runner, not with Jest.

[Lodin]

@Kirtscheva, does it raise the same error as @yanishoss mentioned? About unability to compile ES2015 modules?

[Kirtscheva]

@Lodin The message fail that I am having is the same, but for another module. My problem module is I18nSwitcher. And again it is not transformed.

[sorvell]

In general, you can use build tools like the polymer-cli or webpack/rollup, and babel to transpile LitElement and your code to any environment that requires ES5.

Will leave this open to ensure we have adequate coverage about this in the docs.

[bennypowers]

See also the @open-wc recommendations around testing https://open-wc.org/recommendations/testing.html#setup

[ghost]

Rolling into #397

[stephantabor]

See also the @open-wc recommendations around testing https://open-wc.org/recommendations/testing.html#setup

fyi anyone reading this in the future, the page has moved to https://open-wc.org/guide/testing.html

[daKmoR]

See also the @open-wc recommendations around testing https://open-wc.org/recommendations/testing.html#setup

fyi anyone reading this in the future, the page has moved to https://open-wc.org/guide/testing.html

oh boy - I'm sorry another url restructure... so its https://open-wc.org/testing/ now - and hopefully will stay that way 🙈

[hankchiutw]

I encountered this issue with ts-jest and solved by this jest.config.js:

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  testEnvironment: 'jest-environment-jsdom-sixteen',
  setupFiles: ['jest-canvas-mock', 'jest-webextension-mock'],
  transformIgnorePatterns: ['node_modules/(?!(lit-element|lit-html)/)'],
  moduleNameMapper: {
    '~(.*)': '<rootDir>/src/$1',
  },
  globals: {
    'ts-jest': {
      diagnostics: {
        warnOnly: true,
      },
    },
  },
};

The key is to use preset: 'ts-jest/presets/js-with-ts' and set transformIgnorePatterns.