Tests failing with error: SyntaxError: Cannot use import statement outside a module after upgrading to 2.0.0

My tests start failing once I upgrade my react-router-transition package to version 2.0.0 version. But it is well in production build.

my devDependencies are:

    "@babel/core": "^7.7.4",
    "@storybook/addon-actions": "^5.2.4",
    "@storybook/addon-links": "^5.2.4",
    "@storybook/addons": "^5.2.4",
    "@storybook/react": "^5.2.4",
    "@testing-library/jest-dom": "^4.0.0",
    "@testing-library/react": "^9.0.2",
    "@testing-library/react-hooks": "^2.0.1",
    "axios-mock-adapter": "^1.17.0",
    "babel-loader": "^8.0.6",
    "danger": "^9.1.5",
    "eslint-plugin-react": "^7.14.3",
    "flow-bin": "^0.102.0",
    "husky": "^3.0.3",
    "jest": "^24.9.0",
    "jest-axe": "^3.2.0",
    "jest-mock-axios": "^3.1.0",
    "react-test-renderer": "^16.9.0",
    "source-map-explorer": "^2.0.1"

[Alynva]

Hi @ashr81 – this is likely a result of Jest configuration. This can be worked around via the transformIgnorePatterns option. Something like the following should work:

  transformIgnorePatterns: [
    "node_modules/(?!(react-router-transition)/)",
  ],

It also depends on which version of Jest you’re using. Let me know if this fixes it for you.

I don’t think so, @maisano . In my case the error is pretty the same, but I think that the solution is with your configuration. Here is what I got:

This problem is being caused by the Babel configuration added here https://github.com/maisano/react-router-transition/commit/66db97b671c0d04864f1c468f7eacf2614b81f0d#diff-fc10a6682269c1fefc2abe05d1500b8a . The Babel’s output begins with:

function _objectWithoutProperties(source, excluded) { [...] }

function _objectWithoutPropertiesLoose(source, excluded) { [...] }

import React, { cloneElement, createElement, useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
[...]

And these imports after the Babel’s helpers that cause those errors in Jest. I’ve just rebuilded the repo with '@babel/preset-env', { modules: 'commonjs' } and the Jest started working fine again. There is a long open conversation about this here https://github.com/vuejs/vue-cli/issues/1584 . Please, consider update the configuration.

[esr360]

I’m using Parcel and TypeScript and was running into this issue (react-router-transition not working in Jest due to “Unexpected identifier” when trying to import React). No solution that I tried worked, but I was able to create a suitable work around:

jest.config.js

{
    ...
    "moduleNameMapper": {
        ...
        "react-router-transition": "<rootDir>/src/test/mock.Switch.tsx"
    },
   ...
}

<rootDir>/src/test/mock.Switch.tsx

import React, { ReactElement, ReactNode } from 'react';
import { Switch } from 'react-router-dom';

const AnimatedSwitch = ({ children }: { children: ReactNode }): ReactElement => <Switch>{children}</Switch>;

export { AnimatedSwitch };

(In OP’s case, you would replace Switch with Route, and AnimatedSwitch with AnimatedRoute)

This has the added benefit of removing the transition aspect from the Jest tests (which may or not be a benefit). For my case it’s a benefit as my unit tests can run as normal without having to account for transitions .

To clarify, the work around is to swap out the import from react-router-transition with the regular react-router equivalent by using the moduleNameMapper property in your Jest config.