Jest: Module import syntax error about react-redux HOT 9 CLOSED

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 :)

from react-redux.

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

from react-redux.

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.

from react-redux.

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 🎉

from react-redux.

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

from react-redux.

Much appreciated!

from react-redux.

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?

from react-redux.

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

from react-redux.

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?

from react-redux.