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

[ashr81]

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"

[maisano]

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.

[ashr81]

Adding this code into my package.json helped me resolve the issue. Thank you @maisano for a faster response.

"jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(react-router-transition)/)"
    ]
  }

With this doc as reference. Isn't the react-router-transition pre-compiled before publishing?

[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.

[maisano]

@Alynva it's not uncommon to publish components with import declarations (e.g. import React from 'react';) in them; the error that you're seeing from your test code is that your Jest configuration does not natively understand import declarations. as aforementioned, you can account for this with the transformIgnorePatterns property of your Jest configuration, which well allow these statements to be changed to CommonJS style require calls via babel-jest.

[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"
    },
   ...
}

/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.