Need some help setting up Jest

1

Hey there,

I have Jest working for the most part - however when I try to import my Framework7 setup, I get the following error

    Details: 
    /Users/user/Documents/project/node_modules/framework7/components/swipeout/swipeout.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import $ from 'dom7';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | 
      3 | 
    > 4 | import Swipeout from 'framework7/components/swipeout/swipeout';
        | ^
      5 | import Searchbar from 'framework7/components/searchbar/searchbar';
      6 | import Tabs from 'framework7/components/tabs/tabs';
      7 | import Toolbar from 'framework7/components/toolbar/toolbar';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/js/framework7/index.js:4:1)

My babel.config.js looks like the following

const isTest = String(process.env.NODE_ENV) === 'test';
const presetEnv = isTest
  ? ['@babel/preset-env', { modules: 'commonjs', targets: { node: 'current' } }]
  : ['@babel/preset-env', { modules: false }];

module.exports = {
    presets: [
        [
            ...presetEnv,
            "@babel/preset-typescript",
        ],
    ],
    plugins: [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-syntax-dynamic-import",
    ],
};

My jest.config.ts has the following options enabled

 moduleDirectories: [
   "node_modules"
],
moduleFileExtensions: [
   "js",
   "json",
   "jsx",
   "ts",
   "tsx",
],
transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
    "^.+\\.(js)$": "babel-jest"
},
2

Adding this to my jest.config.ts made it work

 testPathIgnorePatterns: [
   "/node_modules/(?!(framework7))"
 ],
1 Like