Jest tests taking longer than they should

[thorakmedichi]

• template name : (re-start)
• template version : ??? from last month
• react-native version: 0.55.4 (what came in this repo)
• OS : Linux Mint
• Platform causing error: all?? CI?

Step 3: Describe the problem (try to include screenshots):

Running yarn test or even just yarn test:native seems to take much longer than it should. Running locally on my machine, running in a docker container and running it GitLab CI/CD all do this, which leads me to think its some setup here.

Steps to reproduce:

I am not sure if it is one file or all or what. I have 8 test files and 32 tests... nothing big at all. One test that continually seems to take over 50 seconds to run is this component and this test. As you will see this is not a complex file or test.

Yet I continually get the following:
PASS src/components/__tests__/HR.test.js (52.81s)

Well... its actually more like this - again... none of these files is bigger than maybe 50 lines of code:

 PASS  src/common/__tests__/globalFunctions.test.js
 PASS  src/common/actions/__tests__/logs.test.js
 PASS  src/common/immutability-helper/__tests__/extensions.test.js
 PASS  src/common/reducers/__tests__/logs.test.js (13.786s)
 PASS  src/components/__tests__/HR.test.js (52.81s)
 PASS  src/components/__tests__/Counter.test.js (53.169s)
 PASS  src/components/inputs/__tests__/Input.test.js (53.27s)
 PASS  src/components/inputs/__tests__/SelectList.test.js (57.242s)

HR.js

const HR = ({ color, style }) => (
    <View style={[styles.underline, { borderColor: color }, style]} />
);

HR.propTypes = {
    color: PropTypes.string,
    style: ViewPropTypes.style
};

HR.defaultProps = {
    color: 'white',
    style: null
};

export default HR;

HR.test.js

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';

import { View } from 'react-native';
import Enzyme, { shallow } from 'enzyme';

// Components
import HR from '../HR';

Enzyme.configure({ adapter: new Adapter() });

describe('HR', () => {
    test('renders the HR component', () => {
        const wrapper = shallow(<HR />);

        expect(wrapper.find(View)).toHaveLength(1);
        expect(wrapper.find(View).props().style[1].borderColor).toEqual('white');
    });

    test('renders the HR component with custom color prop', () => {
        const wrapper = shallow(<HR color="#3F3F3F" />);

        expect(wrapper.find(View)).toHaveLength(1);
        expect(wrapper.find(View).props().style[1].borderColor).toEqual('#3F3F3F');
    });
});

Observed Results:

When running locally I see PASS src/components/__tests__/HR.test.js (52.81s)

When watching in GitLab CI/CD I get

Jest did not exit one second after the test run has completed.

This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with '--detectOpenHandles' to troubleshoot this issue.

--detectOpenHandles does nothing given all the routing through config files that you have setup. So not sure how to implement that.

Expected Results:

The test should run in a second or two... not 50+ seconds

Additional information

Here are the contents of my gitlab-ci.yml file

stages:
  - lint
  - test

lint:
  stage: lint
  image: node:10.15
  script:
    - yarn
    - yarn lint

test:
  stage: test
  image: node:10.15
  script:
    - yarn
    - yarn test:native --ci

[thorakmedichi]

Even if you can guide me on how to use --detectOpenHandles

I cant seem to run just jest as I keep getting ReferenceError: babelHelpers is not defined on every test

[thorakmedichi]

So for anyone following this I hacked this to solve my issue for now. I decided to just go around the entire re-start setup to solve the issue. It was the only way I could solve it with no direction from the repo owners.

So I changed package.json script test to be jest instead of npm run test:native && npm run test:web

Then I created my own jest.config.js file and put it in my root dir

/* eslint-disable max-len, quote-props */

// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html

module.exports = {
    notify: true,

    // A preset that is used as a base for Jest's configuration
    // preset: 'react-native-web',

    // The test environment that will be used for testing
    testEnvironment: 'node',

    // Automatically clear mock calls and instances between every test
    clearMocks: true,

    // The directory where Jest should output its coverage files
    coverageDirectory: 'coverage',
    // An array of regexp pattern strings used to skip coverage collection
    coveragePathIgnorePatterns: [
        '/node_modules/',
        '/prop-definitions/',
        '/images/',
        '/styles/',
        '/test-data/',
        '/mocks/',
        '/action-types/'
    ],

    // A map from regular expressions to paths to transformers
    transform: {
        // '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js'
        '^.+\\.jsx?$': 'babel-jest',
    },

    // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
    transformIgnorePatterns: [
        // 'node_modules/(?!(jest-)?react-native|react-navigation)',
        'node_modules/(?!react-(.*-)?native(-.*)?)'
    ],

    testPathIgnorePatterns: [
        '/fixtures/',
        '/scripts/'
    ],
    moduleNameMapper: {
        // '.*\\.(svg|png|jpg|gif|ttf)$': '<rootDir>/flow/stub/url-loader.js',
        // 'react-native': '<rootDir>/node_modules/react-native-web',
        '^react-native$': 'react-native-web',
        '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'identity-obj-proxy'
    },
    moduleFileExtensions: [
        'web.js',
        'js',
        'json'
    ]
};

Then for gitlab runner I use yarn jest --ci --detectOpenHandles --maxWorkers=10 --forceExit