Jest error when trying using text field

[rajzik]

I tried to test app which using @material/react-text-field with Create react app latest version available. "@material/react-text-field": "^0.9.0"

Then I was trying to test with yarn test with following error:

FAIL  src/App.test.tsx
  ● 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:

    <project root>\node_modules\@material\textfield\constants.js:63
    export {cssClasses, strings, numbers, VALIDATION_ATTR_WHITELIST, ALWAYS_FLOAT_TYPES};
    ^^^^^^

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at webpackUniversalModuleDefinition (node_modules/@material/react-text-field/dist/index.js:3:292)
      at Object.<anonymous> (node_modules/@material/react-text-field/dist/index.js:10:3)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.321s
Ran all test suites related to changed files.

Steps to reproduce,

npx create-react-app my-app --typescript
yarn add @material/react-text-field

this App.tsx

import React, { Component } from 'react';
import TextField, { Input } from '@material/react-text-field';
import "@material/react-text-field/dist/text-field.css";
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
          <TextField label="test">
            <Input />
          </TextField>
      </div>
    );
  }
}

export default App;

And then run

yarn test

Is there any workaround? I have tried to play with jest settings but I didn't figure it out.

"transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "/node_modules/(?!@material).+\\.js$"

[moog16]

I personally haven't used Jest, but take a look at how npm installed the react-text-field package in your node_modules directory. The @material/textfield package could be nested inside @material/react-text-field/node_modules directory.

Also not a regex expert, but I think the js of "/node_modules/(?!@material).+\\.js$" should be optional. Sometimes/most of the time we leave off .js in the imports.

[rajzik]

Yarn installed package under node_modules/@material/textfield. So this regex "/node_modules/(?!@material).+\\.js$" should work.

[moog16]

@rajzik have you figured out what regex worked for you?

[rajzik]

@moog16 bad luck there, I did not. I have tried everything I could think of. Also I have tried everything from this thread https://github.com/facebook/jest/issues/6229, but this didn't work too.

[moog16]

have you tried https://github.com/facebook/create-react-app/issues/5241 - specifically inlining it as mentioned in this comment

[severcolhon]

I have the exact same issue here. Jest for a React app that uses Web Components made with Lit Element crashes on element's entry point.