javascript - 为什么 Jest 尝试运行我的整个应用程序而不是导入的模块？

Question

当我尝试测试一个 react 组件时，我从其他未导入到测试模块中的组件中得到错误。

如果我导入了模块，我预计会发生这些错误，因为我目前正在重构大量代码并且还没有找到这些文件。

几乎就像 Jest 在测试之前运行我的所有组件一样。这是导致此问题的测试文件之一:

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);
  });
});

登录页面.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>
);

这是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 = () => ({});

堆栈跟踪:

  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)

通过读取堆栈跟踪，我可以假设 Jest 正在检查 components/index.js 和 containers/index.js 中的导出列表。

为什么 jest 关注来自导出列表的错误？我没有将 containers/ApplicationList 导入到 LoginPage 中，它仅通过导出列表作为依赖项被引用。

我发现如果我从导出列表中删除 CustomerDashboard，问题就会消失，这对我来说这不是导入到 LoginPage 的问题

我是否应该使用相对导入，如 import LoginPage from './LoginPage 以及与 LoginPage 相同的目录中的测试，而不是 import { LoginPage }从“组件”?

Answer 1

当您导入 一个模块时，它会解析它的所有依赖项。您的 AppWrap 必须在某个时候导入 PaymentAccountForm。

您可以启用 auto mock缩小深度，或者您可以使用 jest.mock 手动模拟所有子模块两者都将在需要时用模拟版本替换模块。