Jest are faling with component, when are using another component with absolute path

[jindrichkuba]

When I removed WidgetTitle or I changed path to normal component, test will be ok, anyone know how to fix it? I would like to use only absolute path.

 FAIL  src/cockpit/components/Circle/tests/Circle.test.js
● Test suite failed to run

  ReferenceError: initialState is not defined

    12 | };
    13 |
  > 14 | export default function adal(state = initialState, action) {
       |                                      ^
    15 |   switch (action.type) {
    16 |     case FETCH_TOKEN_PENDING:
    17 |       return {

    at initialState (src/redux/reducers/adal.js:14:38)
    at node_modules/redux/lib/redux.js:372:24
        at Array.forEach (<anonymous>)
    at assertReducerShape (node_modules/redux/lib/redux.js:370:25)
    at combineReducers (node_modules/redux/lib/redux.js:435:5)
    at rootReducer (src/redux/reducers/rootReducer.js:17:28)
    at Object.<anonymous> (src/init.store.js:12:34)
    at Object.<anonymous> (src/redux/actions/adalAction.js:6:1)
    at Object.<anonymous> (src/services/AuthService.js:4:1)
    at Object.<anonymous> (src/redux/reducers/adal.js:2:1)
    at Object.<anonymous> (src/helpers/requestHelper.js:2:1)
    at Object.<anonymous> (src/redux/actions/cockpit/eventsViewerAction.js:1:1)
    at Object.<anonymous> (src/redux/reducers/cockpit/eventsViewer.js:1:1)
    at Object.<anonymous> (src/cockpit/components/EventViewerModal/EventViewerModal.js:4:1)
    at Object.<anonymous> (src/cockpit/components/EventViewerModal/index.js:1:1)
    at Object.<anonymous> (src/cockpit/components/index.js:3:1)
    at Object.<anonymous> (src/cockpit/components/Circle/Circle.js:5:1)
    at Object.<anonymous> (src/cockpit/components/Circle/tests/Circle.test.js:3:1)

Test Suites: 1 failed, 6 passed, 7 total
Tests:       7 passed, 7 total
Snapshots:   2 passed, 2 total
Time:        4.694s
Ran all test suites related to files matching /.\/src\/App.js|.\/src\/assets|.\/src\/cockpit|.\/src\/components|.\/src\/config|.\/src\/helpers|.\/src\/index.js|.\/src\/init.adal.js|.\/src\/init.ga.js|.\/src\/init.persistor.js|.\/src\/init.sentry.js|.\/src\/init.serviceWorker.js|.\/src\/init.store.js|.\/src\/pages|.\/src\/redux|.\/src\/services|.\/src\/setupTests.js|.\/src\/tests|.\/src\/types.js|\/Users\/kubaji1\/Documents\/Projects\/webgenie\/src\/cockpit\/components\/Circle\/Circle.js/i.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webgenie@1.0.0 test:staged: `cross-env CI=true NODE_PATH=src react-scripts test --findRelatedTests ./src/* "/Users/kubaji1/Documents/Projects/webgenie/src/cockpit/components/Circle/Circle.js"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webgenie@1.0.0 test:staged script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kubaji1/.npm/_logs/2019-09-17T22_04_42_406Z-debug.log
husky > pre-commit hook failed (add --no-verify to bypass)

[jindrichkuba]

import React from 'react';
import PropTypes from 'prop-types';
import { formatValueObject } from 'helpers/ValueFormatter';
import { ValuePropType, CockpitIconColor } from 'types';
import { WidgetTitle } from 'cockpit/components';
import './_Circle.scss';

export const Circle = ({ data: { ComparatorValueObject, IconColor, Title, Description, ValueObject, MarginPYValue, MarginSPValue }, isThousands }) => {
  const mainValue = formatValueObject(ValueObject, isThousands);
  const subValue = formatValueObject(ComparatorValueObject, isThousands);

  return (
    <div className="Circle">
      <WidgetTitle IconColor={IconColor}>{Title} lol</WidgetTitle>
      <div className="Circle-ellipse">
        <div className="Circle-outline">
          <div className="Circle-midline">
            <div className="Circle-inline" />
          </div>
        </div>
        <div className="Circle-label">{Description}</div>
        <div className={`Circle-title ${mainValue.length >= 8 ? 'Circle-title--small' : ''}`}>{mainValue}</div>
        <div className="Circle-description">{subValue}</div>
      </div>
      {MarginPYValue && MarginSPValue && (
        <div className="Circle-margin">
          <div className="Circle-margin--description">Margin:</div>
          <div className="Circle-margin--numbers">
            {formatValueObject(MarginPYValue, isThousands)} <br /> {formatValueObject(MarginSPValue, isThousands)}
          </div>
        </div>
      )}
    </div>
  );
};

[jindrichkuba]

import React from 'react';
import { shallow } from 'enzyme';
import { Circle } from '../Circle';

it('renders without crashing', () => {
  shallow(
    <Circle
      isThousands={false}
    />
  );
});

[jindrichkuba]

The issue is Jest are going inside /components and there are also components connected with Redux, I will separate those components to container components by article https://daveceddia.com/react-project-structure/

But if someone found different solution, let me know.. thank you, have a nice day