jest errors

[AdrienLemaire]

When trying to run my jest tests after integrating js-snackbar, I got the error

   .../node_modules/js-snackbar/index.js:311                                                                                    
    export { show, hide, ACTION_TYPE };
    ^^^^^^

    SyntaxError: Unexpected token export

      1 | import "js-snackbar/snackbar.css";
    > 2 | import {show} from "js-snackbar";
        | ^

Tried to set the following config in package.json:

  "jest": {
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\]js-snackbar",
    ],

Then got the following error:

  .../node_modules/js-snackbar/snackbar.css:1                                                                                  
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.snackbar-container {                                                                    
                                                                                             ^                                                                                        

    SyntaxError: Unexpected token .

    > 1 | import "js-snackbar/snackbar.css";
        | ^
      2 | import {show} from "js-snackbar";
      3 | import {COLORS} from "~/constants";
      4 | 

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)                                                                    
      at Object.<anonymous> (src/snackbar.js:1:1)

I tried to add more settings like

    "moduleNameMapper": {
      "js-snackbar/snackbar.css": "<rootDir>/config/jest/cssTransform.js",
    },

But then the first error re-appears as if the transformIgnorePatterns rule is bypassed

If trying to map both files:

    "moduleNameMapper": {
      "^js-snackbar/snackbar.css$": "<rootDir>/config/jest/cssTransform.js",
      "^js-snackbar$": "<rootDir>/node_modules/babel-jest",
    },

I get yet another error

    TypeError: (0 , _jsSnackbar.show) is not a function

      63 | 
      64 | export const snackUserNotFound = () =>
    > 65 |   show({
         |   ^

Any idea what would be the right way to remove errors related to js-snackbar when running jest ? The ideal would be having snackbars mocked to keep unit tests fast.

[AdrienLemaire]

Current hack was to create a src/__mocks__/js-snackbar.js file with the following content:

jest.mock("js-snackbar");

export const show = jest.fn().mockImplementation(config => config);

IMO would be better if you could just publish valid javascript files instead of transpiled ones :)
https://github.com/thymikee/jest-preset-angular#adjust-your-transformignorepatterns-whitelist

[johnrhampton]

@Fandekasp - thanks for putting this together, definitely agree on valid JS files. Will work on getting this updated in a new release soon.

To clarify, are you using version 1.1.0?

[AdrienLemaire]

1.0.1 ! Will upgrade by next week, sorry about that.

[johnrhampton]

no worries at all :), just wanted to double check.

[AdrienLemaire]

@johnrhampton js-snackbar v1.1.2 , and still getting errors when removing the mock dir

    SyntaxError: Unexpected token export

      2 | 
      3 | import "js-snackbar/snackbar.css";
    > 4 | import {show} from "js-snackbar";
        | ^
      5 | import {COLORS} from "~/constants";
      6 | 
      7 | const messageMap = {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/snackbar.js:4:1)

[johnrhampton]

@Fandekasp, I can add a transpiled module option. Another quick thought, have you tried adding something similar to your jest config?

"transformIgnorePatterns": [
  "node_modules/?!(js-snackbar)"
]