How can I implement a test for a connected to state component?

[cdanielraducu]

Ask your Question

I tried this for my AuthScreen.tsx

My AuthScreen.test.tsx :

import React from 'react';
import { render } from '@testing-library/react-native';
import { Provider } from 'react-redux';
import AuthScreen from '../../../src/screens/auth/AuthScreen';
import { store } from '../../../src/store/index';

jest.mock('redux-persist-filesystem-storage', () => ({
  default: jest.fn(),
}));
test('test', () => {
  const component = (
    <Provider store={store}>
      <AuthScreen
        componentId="10"
        authenticationType={'login'}
        fromChangePass={false}
      />
    </Provider>
  );

  const { debug } = render(component);
  debug();
});

This is my jest.config.js

const { defaults } = require('jest-config');
module.exports = {
  preset: 'react-native',
  testEnvironment: 'node',
  automock: true,
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleFileExtensions: ['tsx', ...defaults.moduleFileExtensions],
};

And the error I have when I run jest on this test is:

FAIL  __tests__/auth/redux/AuthScreen.test.tsx
 ● Test suite failed to run

   Jest encountered an unexpected token

   This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

   By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

   Here's what you can do:
    • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
    • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
    • If you need a custom transformation specify a "transform" option in your config.
    • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

   You'll find more details and examples of these config options in the docs:
   https://jestjs.io/docs/en/configuration.html

   Details:

   /Users/daniraducu/Documents/deepstash/__tests__/auth/redux/AuthScreen.test.tsx:16
       const component = (<react_redux_1.Provider store={index_1.store}>
                          ^

   SyntaxError: Unexpected token '<'

     at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.476 s
Ran all test suites matching /__tests__\/auth\/redux\/AuthScreen.test.tsx/i.

[guvenkaranfil]

Hello @cdanielraducu, to demonstrate could you please provide a reproduction sample?

[mdjastrzebski]

Closing as stale. @cdanielraducu copied error seems to be related to your Babel/TypeScript setup. Take a look at our basic example setup for recommended settings.

If you believe that this is related to RNTL itself, please create a new issue and provide repro repository based on basic example app.