Unit tests failing with material-table/core 4.1.0.

[debajit-saha]

• I am using Jest and Enzyme to write unit test cases for react app. In those unit test files, where we have import statements for Material Table, the complete test suit is failing. The error message provided by Jest is below:
  Test suite failed to run
  Jest encountered an unexpected token
  This usually means that you are trying to import a file that Jest cannot parse, e.g. it's not plain JavaScript.

• I checked the next recent version 4..0.0, the issue persists there too. But with version 3.2.5, all tests were passing. See the below screenshot for more detail.

Screenshots
(Image 1)

(Image 2)

As the error message suggests possible solutions for the failing tests. I applied 2nd point from the "what you can do" section (Image 2) and added "material-core/table" in the transformIgnorePatterns property in the package.json file. The tests are passing with this change.
So, why do we need to add it to transformIgnorePatterns for tests to work?

Desktop (please complete the following information):

• OS: Windows 10
• Browser: NA
• React version: 16.13.1
• Material-Table/Core - 4.0.1
• Jest: 26.6.3

[matthewoestreich]

We changed how we bundle this library. That's why that is needed, I will update docs.

[debajit-saha]

We changed how we bundle this library. That's why that is needed, I will update docs.

Thanks, @oze4 for the information.

[cwpinto23]

Hi @debajit-saha , what did you add to your transformIgnorePatterns? I can't seem to get mine to work:

   "transformIgnorePatterns": [
      "node_modules/(?!@material-table/core)"
    ],

[debajit-saha]

This is what I have in transformIgnorePatterns. Try this.

"transformIgnorePatterns": [
"node_modules/(?!(jest-)?@material-table/core)"
]

[cwpinto23]

Still breaking for me unfortunately. Works if I drop back to 3.2.5.

node_modules\@material-table\core\dist\index.js:2
    import "./utils/polyfill";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import { basicGet } from '../../api/axiosGet'
      3 | import { makeStyles } from '@material-ui/core/styles';
    > 4 | import MaterialTable from '@material-table/core';
        | ^
      5 | import CircularProgress from '@material-ui/core/CircularProgress';
      6 |
      7 |

      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> (components/table-components/generic-table.js:4:1)

And here's my jest settings in my package.json

  "jest": {
    "setupFiles": [
      "<rootDir>/__mocks__/windowMock.js",
      "<rootDir>/__mocks__/canvasMock.js",
      "<rootDir>/__mocks__/barGraphMock.js"
    ],
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!(jest-)?@material-table/core)"
    ],

    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest",
      "\\.svg$": "./__setup__/svgTransform.js"
    },
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  },

I'm running Jest with jest --env=jsdom

[matthewoestreich]

@cwpinto23 we changed our transpiler in order to cut the library size nearly in half. That is when this issue started.

I just added "type": "module" to our package.json file and changed the build script to use import statements (that was preventing me from using type: module to begin with)..

Would you mind updating to version 4.2.2 and giving this another try? It should fix the Jest error (since now it is officially a module package).

Sorry about that.

[matthewoestreich]

@debajit-saha see updates above

[matthewoestreich]

FYI

You should no longer need the transform in your Jest config in >= v4.2.2

[cwpinto23]

@oze4 , still getting the same error I posted above. I tried it with and without the transformers.
I'm on Webpack 5 btw