Material-components-web: MCW Importing issue in React App

[devshekhawat]

Bugs

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

Watch Usage: Press w to show more. FAIL  src\App.test.js
  ● Test suite failed to run

    C:\Users\MA\Desktop\my-app\node_modules\material-components-web\index.js:17
    import * as base from '@material/base';
    ^^^^^^
    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/App.js:4:30)
      at Object.<anonymous> (src/App.test.js:3:12)

What MDC-Web Version are you using?

0.14.0

What browser(s) is this bug affecting?

Chrome/59.0.3071.115

What OS are you using?

Windows 7

What are the steps to reproduce the bug?

run the react app test command in bash

npm test
[email protected] test C:\Users\MA\Desktop\my-app
> react-scripts test --env=jsdom

[lynnmercier]

Sorry @devshekhawat , we don't have enough knowledge around React or Windows 7 to help answer this question. I suggest you ask this on stackoverflow.com for better results.

[mikegleasonjr]

@devshekhawat It is because /node_modules/ imports does not get transpiled running your test with Jest.

In your jest.config.js in the root of the project, add this key:

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

This will include /node_modules/@material/* for transpilation with babel (But still won't transpile anything else in /node_modules/).

Feel free to replace @material for material-components-web if you don't import components per components.

[duckscofield]

In my package.json, still not work

...
  "jest": {
    "verbose": true,
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\]((?!@material).)*[/\\\\].+\\.(js|jsx)$"
    ],
...