Lit-html: Unexpected token error in tests

[stefanfrede]

I don't know if this is lit-html related or not, but if I try to test something where lit-html is involved I get an unexpected token error:

/Users/foo/bar/baz/node_modules/lit-html/lit-html.js:14
import { defaultTemplateProcessor } from './lib/default-template-processor.js';
       ^

This happened with Mocha and Jest.

[web-padawan]

Which testing tool are you using? In case of karma-webpack, you would have to configure babel-loader to process node_modules e.g. like this:

    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules\/(?!(@webcomponents\/shadycss|lit-html|@polymer|)\/).*/
    }

Working example: https://github.com/web-padawan/lit-components/blob/d995536f5bf94f7c496937fafc60bb7aa63d698a/utils/webpack.common.js#L6

The thing is, in Webpack ecosystem it is quite common to exclude whole node_modules from Babel processing, but in order to handle ES modules, we need to whitelist all the packages using those.

Note: @webcomponents/shadycss is imported by Polymer and should be only needed in case if you are using certain parts of it with lit-element, especially <custom-style> because of this line:

https://github.com/Polymer/polymer/blob/665901ab2483385cf6ae7037663ad0f992e9b930/lib/elements/custom-style.js#L10

[stefanfrede]

At the moment I just use lit-html without any extras (no Polymer, web components, etc.) and Mocha as my testing environment.

This is my playground: https://github.com/stefanfrede/knowthen-counter/tree/lit-html-test-error.

If I import counter.js in counter.test.js I get the unexpected token error because of the lit-html import in view.js.

I run my tests without webpack: mocha --require @babel/register tests/**/*.test.js.

[LarsDenBakker]

Running plain mocha executes the test in node js, I think. Node doesn't natively support es modules yet, so you will need to compile those before running the tests. Lit-html requires a browser environment to work though, so it will fail on other errors as well.

[stefanfrede]

As far as I understand it the --require @babel/register part does the trick for Mocha regarding modules and other new goodnesses.

I currently try to write tests for my actions where Crocks gets imported and there I have no problems at all.

Besides that Mocha runs in webpack when you start the test watcher in my repo (npm run test:watch) and there I run into the same problem.

[justinfagnani]

@stefanfrede I notice that the branch you linked to is deleted and you currently have tests in master. Is this still a problem? lit-html requires that your environment support modules or that you compile modules out. We generally use browser-based testing, because lit-html uses DOM APIs, so I'm unfamiliar with how to configure node in this scenario (outside of using the esm in a few projects).

[stefanfrede]

@justinfagnani I'm sorry, I didn't think about screwing up the links when I merged and deleted the branch.

I created a new branch where you can see the error.

If you want to reproduce the error check out my repo and install the dependencies. Then just run npm test.

I commented the line which is responsible for the error.

[keanulee]

I doubt lit-html will run as-is in Node.js given that it uses ES modules and isn't .mjs. As @web-padawan suggested, you can modify webpack config to include node_modules/lit-html (i.e. here) to make sure babel can transpile those import statements. Not sure how lit-html would behave beyond that though.

[justinfagnani]

Closing since we don't directly support running in Node, and definitely require either an environment that supports modules, or a toolchain to compile modules out.

[leegee]

Is there any point turning this into a feature request? Seems like things related to Polymer are a generation behind in tooling — Jest's use of jsdom for the ubiquitous React, Angular's tool-generated test stubs and mocks have perhaps spoilt me, but working with a fast command-line test tool watching the project really is too good not to have.

[justinfagnani]

I think in this case we're more like a generation ahead than a generation behind. We write for modern browsers, all of which support modules. Older browsers and Node will require a build/bunding step.

jsdom doesn't support modules either, so it needs to catch up, but it also doesn't support Custom Elements, so in many cases even that won't be enough. Puppeteer with Headless Chrome is probably a better choice for fast, command-line-only tests.

[leegee]

Indeed — and that's the problem!

Cheers
Lee

On Wed, 23 Jan 2019 at 20:53, Justin Fagnani [e-mail]
wrote:

I think in this case we're more like a generation ahead than a generation
behind. We write for modern browsers, all of which support modules. Older
browsers and Node will require a build/bunding step.

jsdom doesn't support modules either, so it needs to catch up, but it also
doesn't support Custom Elements, so in many cases even that won't be
enough. Puppeteer with Headless Chrome is probably a better choice for
fast, command-line-only tests.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Polymer/lit-html/issues/482#issuecomment-456942729,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAfTMO4pROkilSpRfqChLfAPIF3u4eTrks5vGL2ngaJpZM4WgOyn
.

[alber70g]

I'm using jest and running the tests won't run and give the same error as OP. What's the solution to do this? I'm using ts-jest and my tests are in ts as well.

[justinfagnani]

lit-html is distributed as standard JS modules. Node doesn't support modules yet. If you're trying to load the lit-html source into Node you'll have to compile to CommonJS presumably.

[djforth]

I'm having the same issue. Does anyone know a work around for jest? I've tried everything to make it work with no joy.

[justinfagnani]

@djforth it really seems like Jest and jsdom need some modernization. I'd try Puppeteer. That way you'd be running tests in a real browser that you support. IOW - do you support Jest as a browser for your users?

[djforth]

@justinfagnani while I take your point, I was using karma and jasmine before moving to jest and the test suite was slow and tended to heap out of memory often. I'd also add that I haven't had any issues moving to jest in terms of testing in real browser, so the convenience of a more stable test suite without re-writing to another test framework is unfortunately preferable in my team.

I guess the issue is that jsdom(and jest) is node based and think there is few issues with this node and es6 modules, although I'm not sure why I can't get babel to transpile it. I think you can get Jest to work with puppeteer, but not sure how easy it is to implement, might have a look when I have time.

TBH I think lit-html might be overkill for what I'm doing so might stick to standard template strings to save the hassles. But this looks like an interesting project so hopefully node get modules or some figures out a work around, so can take a look in future.

[djforth]

Ah ha, I figured out a solution for the jest issue. In your jest config add the following

"transformIgnorePatterns": ["/node_modules/(?!lit-html).+\\.js"],

This is important, re-name your babel config to babel.config.js (mine was .babelrc.js)

See here for the fix - https://github.com/facebook/jest/issues/6229#issuecomment-403539460

Hopefully that will help people!

[FaBeyyy]

Ah ha, I figured out a solution for the jest issue. In your jest config add the following

"transformIgnorePatterns": ["/node_modules/(?!lit-html).+\\.js"],

This is important, re-name your babel config to babel.config.js (mine was .babelrc.js)

See here for the fix - facebook/jest#6229 (comment)

Hopefully that will help people!

Hey there, i did exactly the same but cannot get it working...still getting this error

import { defaultTemplateProcessor } from './lib/default-template-processor.js';
SyntaxError: Unexpected token {

babel.config.js

module.exports = {
    "presets": [
        "@babel/preset-typescript",
        "@babel/preset-env",
    ],
}

jest.config.js

module.exports = {
  "transformIgnorePatterns": ["/node_modules/(?!lit-html).+\\.js"],
  "preset": "ts-jest"
}

Appreciate your help!

EDIT:
tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "commonjs",
    "lib": [
      "es6",
      "dom"
    ],
    "target": "es6"
  }
}

EDIT2: Also tried adding the babelConfig path to jest.config but it gives me invalid character 'm'
with using a babel config js and when trying to use a .babelrc or json i just get the error from the beginning again...

globals: {
    'ts-jest': {
      babelConfig: 'babel.config.js'
    }
  }

[djforth]

Apologies @FaBeyyy I don't use TypeScript, it looks to me like something within the typescript/ts-jest config. Looking at the thread maybe a custom transform might help? - https://github.com/facebook/jest/issues/6229#issuecomment-449945502

[tamj0rd2]

I'm not using ts-jest and I still have this issue

[justinfagnani]

@tamj0rd2 lit-html is distributed as standard JS modules. You need to load them in an environment that supports JS modules, or transpile your application, including dependencies, to whatever module system your environment supports.