浅玩笑之前的模拟函数或变量

Question

我正在尝试写笑话来测试我的组件。但是一旦调用了浅层，我的测试就会失败，因为调用 fetchUsers 函数说无法读取 null 的属性获取（这似乎是 myRequestor 的初始值）。它无法在 MyComponent 内的 MyReqUtil 功能组件中初始化 myRequestor 的值。看起来它没有调用此函数或没有初始化值。我被困在这个问题上，因为我无法每次都编写测试只是在我使用 shallow 的第一行失败了。任何人都可以帮我解决这个问题。

MyComponent.jsx

let myRequestor = null;

 const MyReqUtil = () => {
 myRequestor = React.useContext(MyRequestorContext);
 return <ApplicationLoadingOverlay isOpen backgroundStyle="clear" />;
};


class MyComponent extends React.Component {

componentDidMount() {
  this.setState({ isLoading: true });
  this.fetchUsers();
}

fetchUsers() {
this.setState({ isLoading: true });
const { request } = myRequestor.get({
  url: '/users',
});

request
  .then(({ data }) => {
    if (Object.prototype.hasOwnProperty.call(data[0], 'error')) {
      this.setState({
        error: 'Failure', errorMsg: data[0].error, isOpen: true, isLoading: false, userItems: [{ name: 'DEFAULT', id: 'Default' }],
      });
      return;
    }

    const users = data.map(user => ({
      name: user.shortName,
      id: user.key,
    }));

    this.setState({
      userItems: users, isLoading: false,
    });
  })
  .catch((error) => {
    console.log(error);
    this.setState({ error: 'Failure', isOpen: true, isLoading: false });
  });
 }

 render() {

   if (this.state.tenantItems === null) {
      return <MyReqUtil />;
   }
}

MyComponent.test.jsx

describe('<MyComponent />', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<MyComponent />);
  });

     it('should check `componentDidMount()`', () => {
        const instance = wrapper.instance();
        jest.spyOn(instance, 'fetchUsers');
        instance.componentDidMount();
        expect(instance.fetchUsers).toHaveBeenCalledTimes(1);
     });

   it('Should Render Component Correctly', () => {
    const spy = jest.spyOn(OrionReqUtil, 'fetchUsers');
    const wrapper = shallow(<MyComponent />);
    const instance = wrapper.instance();
    spy.mockReturnValue(['mockItem1', 'mockItem2', 'mockItem3']);

   });
});

Answer 1

测试在beforeEach 和it 中执行了两次shallow(<MyComponent />)，这可能是一个错误。如果测试没有完全共享beforeEach 中的代码，则应将其移至测试。

disableLifecycleMethods 选项就是这种情况，它允许在准备好实例时手动调用componentDidMount：

wrapper = shallow(<MyComponent />, { disableLifecycleMethods: true });
jest.spyOn(wrapper.instance(), 'fetchUsers').mockReturnValue(...);
wrapper.instance().componentDidMount();

对于原型方法，另一种方法是在实例化之前在类原型上窥探或模拟它们：

jest.spyOn(MyComponent.prototype, 'fetchUsers').mockReturnValue(...);
wrapper = shallow(<MyComponent />);

这在这种情况下无济于事，因为MyComponent 依赖于MyReqUtil 子级才能正确渲染和安装，因此不适合使用shallow 进行测试。

这实际上是 XY 问题。由于是MyReqUtil 引起了问题，因此首先需要解决它。首先，它是一个不同的单位。这意味着它需要移动到另一个模块，因此可以使用jest.mock 进行模拟。

另外，MyReqUtil 与 MyComponent 建立了不健康的关系，它是一个为父级维护隐藏全局状态 (myRequestor) 的子级，并假定在挂载父级之前它不需要它。如果有多个上下文，这将停止按预期工作 - 即使在生产中没有发生这种情况，在测试中也可能需要这样做。

如果它唯一的作用是为MyComponent 提供依赖项，那么它应该是MyComponent 的父级，而不是相反：

const MyReqUtil = (props) => {
  const myRequestor = React.useContext(MyRequestorContext);
  const loaderElement = <ApplicationLoadingOverlay isOpen backgroundStyle="clear" />;

  return <MyComponent loader={loaderElement} requestor={myRequestor} {...props} />
};

这样它就可以作为一个单独的单元进行全面测试。并且MyComponent 可以进行全面测试，因为依赖项可以作为 props 使用，因此可以进行模拟。