Jest: Module import syntax error

[pwltr]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• react: 18.2.0
• react-native: 0.72.4
• redux: 5.0.0
• react-redux: 9.0.1
• jest: 29.7.0
• babel-jest: 29.7.0

What is the current behavior?

So this is probably not a Redux issue per se but since this is a popular project and this just came up with the new update I'm hoping somebody else has run into this and may offer some help. I've been dealing with this exact issue in other projects and was not able to resolve it.

When running unit tests with Jest I'm seeing the following error after upgrading to react-redux v9.0.0.

.../node_modules/react-redux/dist/react-redux.react-native.mjs:2
    import * as ReactOriginal from "react";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

       8 | } from 'react';
       9 | import { AppState, Linking } from 'react-native';
    > 10 | import { useSelector } from 'react-redux';
         | ^
      11 | import {
      12 |      LinkingOptions,
      13 |      createNavigationContainerRef,

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.require (src/navigation/root/RootNavigator.tsx:10:1)

jest.config.js:

module.exports = {
	preset: 'react-native',
	moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'mjs', 'json', 'node'],
	transformIgnorePatterns: ['<roodDir>/__mocks__', 'jest-runner'],
	setupFiles: [
		'<rootDir>/jest.setup.js',
		'./node_modules/react-native-gesture-handler/jestSetup.js',
		'dotenv/config',
	],
	moduleNameMapper: {
		'\\.(jpg|jpeg|svg|png)$': '<rootDir>/__mocks__/fileMock.js',
	},
};

Anybody able to share a working Jest config?

What is the expected behavior?

Expecting Jest unit tests to be able to parse all modules.

Which browser and OS are affected by this issue?

No response

Did this work in previous versions of React Redux?

• Yes

[markerikson]

Yeah, this seems like more of a Jest/ESM config issue at first glance. Jest normally transforms ESM module files into CJS, as far as I know. Seems like it isn't transforming this file.

Out of curiosity, what happens if you use the CodeSandbox CI build from #2102 ? Merged that additional tweak last night but haven't released it yet.

[pwltr]

Hi @markerikson !

After pulling from master and running tsup tests do indeed seem to be running again :) So can confirm that PR fixed react-native issues.

Congrats on the release btw, really awesome work 🎉

[markerikson]

Thanks! I'm out for the evening, but will publish that as 9.0.2 once I'm back

[markerikson]

There you go! https://github.com/reduxjs/react-redux/releases/tag/v9.0.2

[pwltr]

Much appreciated!

[ejvet-ct]

Unfortunately, I'm seeing a similar issue to this on version 9.0.2.

Details:

.../node_modules/react-redux/dist/react-redux.react-native.js:2
import * as ReactOriginal from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module

Although I can see the change to the filename you referenced, the outcome for my environment seems the same. @pwltr Did your Jest tests run fine once you upgraded?

[pwltr]

@ejvet-ct Yes my tests are running fine now, can see it in CI here. FWIW I haven't changed anything in the jest config or elsewhere.

[Optarion]

I did face the same issue while launching my jest tests with version 9.0.4.

I manage to fix it by adding react-redux in the list of transformIgnorePatterns:

"transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|...|react-redux)"
    ],

hope it will help some folks :)

[mrarslanark]

Hi, @Optarion. Thanks for this but when I add react-redux to transformIgnorePatterns I end up with the following:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App should render successfully 1`] = `null`;

App.test.tsx

import App from "App"
import React from "react"
import { act } from "react-test-renderer"
import { renderWithProviders } from "src/helpers/wrapper"

describe("App", () => {
  it("should render successfully", async () => {
    const view = renderWithProviders(<App />).toJSON()
    await act(() => {
      expect(view).toMatchSnapshot()
    })
  })
})

wrapper.tsx

import { NavigationContainer } from "@react-navigation/native"
import { render, type RenderOptions } from "@testing-library/react-native"
import React, { type PropsWithChildren } from "react"
import { Provider } from "react-redux"
import { setupStore, type AppStore, type RootState } from "src/store"

interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
  preloadedState?: Partial<RootState>
  store?: AppStore
}

export function renderWithProviders(
  ui: React.ReactElement,
  extendedRenderOptions: ExtendedRenderOptions = {}
) {
  const {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = setupStore(preloadedState),
    ...renderOptions
  } = extendedRenderOptions

  const Wrapper = ({ children }: PropsWithChildren) => (
    <Provider store={store}>{children}</Provider>
  )

  // Return an object with the store and all of RTL's query functions
  return {
    store,
    ...render(ui, { wrapper: Wrapper, ...renderOptions })
  }
}

What could be the reason of getting null for my snapshot?