使用 Jest 测试 React componentWillUnmount

Question

我正在使用 React 的 TestUtil.renderIntoDocument 来测试一个 React 组件 class，like this（只是我使用的是 TypeScript 而不是 Babel）：

describe("MyComponent", () => {
  it("will test something after being mounted", () => {
    var component = TestUtils.renderIntoDocument(<MyComponent />);
    // some test...
  })
})

这可行，但我想编写一个测试来验证 componentWillUnmount 是否按预期运行。但是，测试运行器似乎永远不会卸载组件，这并不奇怪。所以我的问题是：如何从测试中卸载组件？ TestUtil 没有任何看起来像我想要的东西，我想像的 removeFromDocument 的东西。

Answer 1

没错，但是 TestUtils.renderIntoDocument returns 一个 ReactComponent 可以访问组件的生命周期方法。

所以你可以手动调用component.componentWillUnmount()。

Answer 2

import { mount } from 'enzyme';
import ReactDOM from 'react-dom';
...

let container;
beforeEach(() => {
   container = document.createElement("div");
   mount(<YourReactComponent />, {attachTo: container});
});

afterEach(() => {
    ReactDOM.unmountComponentAtNode(container);
});

Answer 3

使用 enzyme 3 库的 shallow() 和 unmount()，您可以测试是否已像这样调用生命周期方法：

it(`lifecycle method should have been called`, () => {
  const componentDidMount = jest.fn()
  const componentWillUnmount = jest.fn()

  // 1. First extends your class to mock lifecycle methods
  class Foo extends MyComponent {
    constructor(props) {
      super(props)
      this.componentDidMount = componentDidMount
      this.componentWillUnmount = componentWillUnmount
    }

    render() {
      return (<MyComponent />)
    }
  }

  // 2. shallow-render and test componentDidMount
  const wrapper = shallow(<Foo />)

  expect(componentDidMount.mock.calls.length).toBe(1)
  expect(componentWillUnmount.mock.calls.length).toBe(0)

  // 3. unmount and test componentWillUnmount
  wrapper.unmount()

  expect(componentDidMount.mock.calls.length).toBe(1)
  expect(componentWillUnmount.mock.calls.length).toBe(1)
})

Answer 4

Step1: Use "jest.spyOn" on "componentWillUnmount" method.
Step2: Trigger unmount on the mounted component.
Finally: check if componentWillUnmount is called when component is unmounted

代码

it('componentWillUnmount should be called on unmount', () => {
    const component = createComponent();
    const componentWillUnmount = jest.spyOn(component.instance(), 'componentWillUnmount');
    component.unmount();
    expect(componentWillUnmount).toHaveBeenCalled();
});

Answer 5

假设您在 componentWillUnmount 中有一个函数调用：

componentWillUnmount(){
    this.foo();
}

在测试中你可以做：

const wrapper = mount(<YourComponent />);
const spy = jest.spyOn(wrapper.instance(), 'foo');
wrapper.unmount();
expect(spy).toHaveBeenCalled();

使用 Jest 测试 React componentWillUnmount

Testing React componentWillUnmount using Jest

reactjs

jestjs