10

When I am trying to test a react component, I get errors from other components 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 components before testing. Here is one of the test files that cause this issue:

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

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 'components';
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/components/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/components/CustomerDashboard/CustomerDashboard.js:2:19)
  at Object.<anonymous> (src/components/index.js:14:43)
  at Object.<anonymous> (src/components/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 components/index.js and containers/index.js.

Why is jest concerned with errors coming 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 'components'?

1 Answer 1

5
+50

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.

7
  • 1
    So If I have import module from 'components';, will everything in components/index.js be resolved too? With components/index.js being a list of exports. I think that's what is happening based on what you've said as I am getting similar issues with multiple components.
    – Emobe
    Dec 20, 2017 at 15:56
  • Yes, everything that's exported. Imports are static and resolved immediatly when the file is loaded, even if the file is not used. Dec 20, 2017 at 16:03
  • 1
    So I should be using a relative path to the file like './component' rather than 'components' to avoid errors from dependencies?
    – Emobe
    Dec 20, 2017 at 16:07
  • 1
    Sorry, the lack of a curly brace in my initial comment was a typo. I have improved the question and added a new example with the same issue happening. Maybe that will help with explaining better
    – Emobe
    Dec 20, 2017 at 16:34
  • 1
    What you need to do is to import {module} from "components/Loginpage", so that you skip the index.js and all its imports. Note that if you are "export ... from ...", this is actually also an import. Dec 23, 2017 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.