When I am trying to test a react ponent, I get errors from other ponents that are not imported into the tested module.

I would expect these errors to occur if I had imported the module as I am currently refactoring a lot of code and haven't got round to these files yet.

It's almost as if Jest is running all of my ponents before testing. Here is one of the test files that cause this issue:

import React from 'react';
import { LoginPage } from 'ponents';

describe('Login Page', () => {
  it('should render', () => {
    expect(shallow(<LoginPage />)).toMatchSnapshot();
  });
  it('should use background passed into props', () => {
    const image = 'bg.png';
    const expected = {
      backgroundImage: image
    };
    const wrapper = shallow(<LoginPage background={image} />);
    expect(wrapper.prop('style')).toEqual(expected);
  });
});

Loginpage.js

import React from 'react';
import { LoginForm } from 'ponents';
import './LoginPage.css';

type Props = { background: string , logInRequest: Function};

const LoginPage = ({ background, logInRequest }: Props) => (
  <div className="login-page" style={{backgroundImage: background}}>
    <LoginForm submit={logInRequest}/>
  </div>
);

Here is setupTests.js

import Enzyme, { shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import localStorage from 'mock-local-storage';

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

global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};

global.shallow = shallow;
global.mount = mount;
global.render = render;
console.log = () => ({});

Stack trace:

  at invariant (node_modules/invariant/invariant.js:42:15)
  at wrapWithConnect (node_modules/react-redux/lib/ponents/connectAdvanced.js:101:29)
  at Object.<anonymous> (src/containers/ApplicationList/ApplicationList.js:8:42)
  at Object.<anonymous> (src/containers/index.js:9:41)
  at Object.<anonymous> (src/ponents/CustomerDashboard/CustomerDashboard.js:2:19)
  at Object.<anonymous> (src/ponents/index.js:14:43)
  at Object.<anonymous> (src/ponents/LoginPage/LoginPage.test.js:2:19)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

From reading the stack trace, I can assume that Jest is checking the list of exports inside ponents/index.js and containers/index.js.

Why is jest concerned with errors ing from a list of exports? I am not importing containers/ApplicationList into LoginPage, it is only referenced as a dependency through the list of exports.

I have found that if I remove CustomerDashboard from the export list, the issue goes away which says to me it's not an issue with importing into LoginPage

Should I be using a relative import like import LoginPage from './LoginPage with the test in the same directory as LoginPage rather than import { LoginPage } from 'ponents'?

When I am trying to test a react ponent, I get errors from other ponents that are not imported into the tested module.

I would expect these errors to occur if I had imported the module as I am currently refactoring a lot of code and haven't got round to these files yet.

It's almost as if Jest is running all of my ponents before testing. Here is one of the test files that cause this issue:

import React from 'react';
import { LoginPage } from 'ponents';

describe('Login Page', () => {
  it('should render', () => {
    expect(shallow(<LoginPage />)).toMatchSnapshot();
  });
  it('should use background passed into props', () => {
    const image = 'bg.png';
    const expected = {
      backgroundImage: image
    };
    const wrapper = shallow(<LoginPage background={image} />);
    expect(wrapper.prop('style')).toEqual(expected);
  });
});

Loginpage.js

import React from 'react';
import { LoginForm } from 'ponents';
import './LoginPage.css';

type Props = { background: string , logInRequest: Function};

const LoginPage = ({ background, logInRequest }: Props) => (
  <div className="login-page" style={{backgroundImage: background}}>
    <LoginForm submit={logInRequest}/>
  </div>
);

Here is setupTests.js

import Enzyme, { shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import localStorage from 'mock-local-storage';

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

global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};

global.shallow = shallow;
global.mount = mount;
global.render = render;
console.log = () => ({});

Stack trace:

  at invariant (node_modules/invariant/invariant.js:42:15)
  at wrapWithConnect (node_modules/react-redux/lib/ponents/connectAdvanced.js:101:29)
  at Object.<anonymous> (src/containers/ApplicationList/ApplicationList.js:8:42)
  at Object.<anonymous> (src/containers/index.js:9:41)
  at Object.<anonymous> (src/ponents/CustomerDashboard/CustomerDashboard.js:2:19)
  at Object.<anonymous> (src/ponents/index.js:14:43)
  at Object.<anonymous> (src/ponents/LoginPage/LoginPage.test.js:2:19)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

From reading the stack trace, I can assume that Jest is checking the list of exports inside ponents/index.js and containers/index.js.

Why is jest concerned with errors ing from a list of exports? I am not importing containers/ApplicationList into LoginPage, it is only referenced as a dependency through the list of exports.

I have found that if I remove CustomerDashboard from the export list, the issue goes away which says to me it's not an issue with importing into LoginPage

Should I be using a relative import like import LoginPage from './LoginPage with the test in the same directory as LoginPage rather than import { LoginPage } from 'ponents'?

• javascript
• reactjs
• jestjs
• create-react-app

1 Answer 1

When you import a module, it will resolve all it's dependencies. Your AppWrap must import PaymentAccountForm at some point.

You can enable auto mock to narrow the depth, or you can mock all sub module manually with jest.mock both will replace module with a mocked version when it is being required.