Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does Jest try running my whole app rather than the imported modules?

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'?

like image 728
Emobe Avatar asked Dec 14 '17 12:12

Emobe


1 Answers

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.

like image 66
Gabriel Bleu Avatar answered Oct 19 '22 11:10

Gabriel Bleu