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

时间:2019-06-17 12:59:28

标签: javascript reactjs enzyme react-hooks react-dom

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

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中,并且围绕它,它根本没有运行。

1 个答案:

答案 0 :(得分:1)

这是对我有用的方法,但有一些警告:

  1. 我使用jest代替sinon进行间谍和嘲笑;
  2. 我使用了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();
});