Test du composant ReactWillUnmount à l'aide de Jest - reactjs, jestjs

J'utilise React "s TestUtil.renderIntoDocument pour tester une classe de composants React, comme ça (seulement j'utilise TypeScript au lieu de Babel):

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

Cela fonctionne, mais je veux écrire un test qui vérifie que componentWillUnmount se comporte comme prévu. Cependant, il semble que le testeur ne démonte jamais le composant, ce qui n’est pas surprenant. Ma question est donc la suivante: comment démonter le composant dans un test? le TestUtil didn "t rien qui ressemble à ce que je veux, quelque chose dans le sens de removeFromDocument J'imaginerais.

Réponses:

C'est juste mais TestUtils.renderIntoDocument renvoie un ReactComponent avec accès aux méthodes de cycle de vie du composant.

Vous pouvez donc appeler manuellement component.componentWillUnmount().

En utilisant enzyme 3 bibliothèque "s shallow() et unmount(), vous pouvez tester si les méthodes de cycle de vie ont été appelées comme ceci:

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

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

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

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

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

Code

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