Can't get Jest tests to run with reactotron-redux even after mocking reactotron-react-native with the following error - SyntaxError: Cannot use import statement outside a module

[BozhidarKabzamalov]

Describe the bug

I have a React Native project and was able to setup reactotron-react-native and my tests were still working fine, but as soon as I installed reactotron-redux and set it up as per documentation, all my tests started failing with the following error - SyntaxError: Cannot use import statement outside a module.

If I remove .use(reactotronRedux()) from ReactotronConfig.js the tests start passing again. There doesn't seem to be any documentation regarding mocking so I've found my mock from other Reactotron github issues, but none of them are working for me.

I am on the latest verions of both reactotron-react-native and reactotron-redux

The error looks like this:

    SyntaxError: Cannot use import statement outside a module

      4 | const reactotron = Reactotron.configure() // controls connection & communication settings
      5 |     .useReactNative() // add all built-in react native plugins
    > 6 |     .use(reactotronRedux())
        |                ^
      7 |     .connect(); // let's connect!
      8 |
      9 | export default reactotron;

ReactotronConfig.js

const Reactotron = require('reactotron-react-native').default;
const { reactotronRedux } = require('reactotron-redux');

const reactotron = Reactotron.configure() // controls connection & communication settings
    .useReactNative() // add all built-in react native plugins
    .use(reactotronRedux())
    .connect(); // let's connect!

export default reactotron;

Store.js

export const store = configureStore({
    reducer: reducers,
    middleware: [],
    enhancers: __DEV__ ? [reactotron.createEnhancer!()] : [],
});

mocks/reactotron-react-native.js

const reactotron = {
    configure: () => reactotron,
    useReactNative: () => reactotron,
    use: () => reactotron,
    connect: () => reactotron,
    clear: () => reactotron,
    createEnhancer: () => reactotron,
};

export default reactotron;

Reactotron version

5.1.8

[robsoden]

I've gotten it to work successfully mocking it this way:

jest.mock('reactotron-react-native', () => {
  return {
    configure: jest.fn().mockReturnThis(),
    setAsyncStorageHandler: jest.fn().mockReturnThis(),
    useReactNative: jest.fn().mockReturnThis(),
    use: jest.fn().mockReturnThis(),
    connect: jest.fn().mockReturnThis(),
    onCustomCommand: jest.fn(),
  }
})

jest.mock('reactotron-redux', () => {
  return {
    reactotronRedux: jest.fn(),
  }
})

[Kotauror]

@BozhidarKabzamalov I had the same problem and the mock above wasn't enough to fix it, I guess because createEnhancer is a reactotron-redux function but called on reactotron config. I wasn't able to fix the mock to get it work but I've found a walkaround.

I no longer use the real store in my tests but only a mocked one. So whenever in my tests I'm using store I'm not importing the one from here

export const store = configureStore({
  reducer: persistedReducer,
  middleware: middlewares,
  enhancers: __DEV__ ? [reactotron.createEnhancer!()] : []
})

But this mock from my jest-setup

const mockStore = configureStore({
})
export const storeContent: RootState = {
  config: {
...
  },
}
export const store = mockStore(storeContent)

This way Im not hitting the enhancers: __DEV__ ? [reactotron.createEnhancer!()] : [] line in my tests.

Hope this helps!