Question

我有一个具有这种设置的组件

const ChestWithToys = ({toyBoxId, handleTidyToys})=> {
    /* do stuff with toys */
    useEffect(() => () => handleTidyToys(), [toyBoxId])
}

这是我对酶和作用的测试（来自react-dom/test-utils）

it('tidies toys on unmount', () => {
    let handleTidyToys = sinon.stub();
    let wrapper = shallow(<ChestWithToys toyBoxId={1} handleTidyToys={handleTidyToys} />);
    expect(handleTidyToys).to.have.callCount(0);
    act(() => {
       wrapper.unmount();
    });
    expect(handleTidyToys).to.have.callCount(1);
});

该组件按预期运行。但是在测试中，handleTidyToys永远不会被调用。是什么赋予了？我找不到在其中进行卸载的更好的example，但是据我所知，这应该触发我的清理回调。

如果我用setProps替换卸载并更改queryId，它仍然不会触发。

酶不兼容，还是我犯了其他错误？

编辑：我刚刚将大量console.logs放到useEffect中，并且围绕它，它根本没有运行。

Answer 1

这是对我有用的方法，但有一些警告：

我使用jest代替sinon进行间谍和嘲笑；
我使用了react-dom的render函数而不是enzyme shallow-这有点作弊，因为render可能与完整的mount类似：

import { act } from 'react-dom/test-utils';
import { render, unmountComponentAtNode } from 'react-dom';
// import your ChestWithToys component

let useEffect, container;

beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it('tidies toys on unmount', () => {
  let handleTidyToys = jest.fn();
  useEffect = jest.spyOn(React, "useEffect");

  act(() => {
    render(<ChestWithToys toyBoxId={1} handleTidyToys={handleTidyToys} />, container);
  });

  // same as expect(handleTidyToys).to.have.callCount(0);
  expect(handleTidyToys).not.toHaveBeenCalled();

  unmountComponentAtNode(container);
  // same as expect(handleTidyToys).to.have.callCount(1);  
  expect(handleTidyToys).toHaveBeenCalled();
});

测试useEffect卸载挂接回调，该调用在酶中使用act

1 个答案: