React-native-ui-kitten: When Using EvaIconsPack, jest test fails

[jeloagnasin]

Issue type

• [x] bug report
• [ ] feature request

Issue description

I'm writing my unit tests and I can't seem to set up the EvaIconsPack properly.

Current behavior:

Output of yarn test is:

yarn run v1.19.1
$ jest
 FAIL  src/containers/Login/__tests__/index.test.tsx
  ● Test suite failed to run

    node_modules/@
ui-kitten/eva-icons/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,
global,jest){import { createIconsMap } from './createIconsMap';

             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import { create, act } from 'react-test-renderer';
      3 | import { mapping, light } from '@eva-design/eva';
    > 4 | import { EvaIconsPack } from '@ui-kitten/eva-icons';
        | ^
      5 | import { ApplicationProvider, IconRegistry } from 'react-native-ui-kitten';
      6 | import { createAppContainer } from 'react-navigation';
      7 | import { createStackNavigator } from 'react-navigation-stack';

      at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/containers/Login/__tests__/index.test.tsx:4:1)

 PASS  src/components/Form/__tests__/index.test.tsx

Test Suites: 1 failed, 1 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   3 passed, 3 total
Time:        3.12s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

(Removed sensitive information)

Expected behavior:

I should be able to use EvaIconsPack in my unit tests.

Steps to reproduce:

1. Create unit tests.
2. Use EvaIconsPack.

Related code:

This is my index.test.tsx file:

import React from 'react';
import { create, act } from 'react-test-renderer';
import { mapping, light } from '@eva-design/eva';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { ApplicationProvider, IconRegistry } from 'react-native-ui-kitten';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import Login from '..';

describe('Login', () => {
  let login = null;
  let navigate = jest.fn();

  beforeAll(() => {
    const App = createAppContainer(
      createStackNavigator({
        Login,
      }),
    );
    act(() => {
      login = create(
        <>
          <IconRegistry icons={EvaIconsPack} />
          <ApplicationProvider mapping={mapping} theme={light}>
            <App />
          </ApplicationProvider>
        </>,
      );
    });
  });

  test('should render', () => {
    expect(login.toJSON()).toMatchSnapshot();
  });
});

[jeloagnasin]

I switched back to using FontAwesome5 on my app and unit tests to work around the issue. 😢

[artyorsh]

Try configuring jest to ignore outer packages. In jest.config.js something like:

  modulePathIgnorePatterns: [
    '<rootDir>/src/playground/',
  ],
  testPathIgnorePatterns: [
    '<rootDir>/node_modules',
    '<rootDir>/dist',
    '<rootDir>/docs',
  ],

[jeloagnasin]

What worked for me is adding @ui-kitten to my transformIgnorePatterns like so:

{
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|sentry-expo|native-base|@ui-kitten)"
    ]
  }
}

Thanks @artyorsh for pointing me in the right direction!