javascript - react - ¿con qué método del ciclo de vida podemos capturar errores en nuestros componentes?

Uso de Jest para espiar la llamada de método en componentDidMount

Question

Recientemente quise probar que algún método personalizado se llama condicionalmente en el método componentDidMount de un componente React.

componentDidMount() {
  if (this.props.initOpen) {
    this.methodName();
  }
}

Estoy usando Jest como mi marco de prueba, que incluye jest.fn() para jest.fn() / espías. He leído que esto sería bastante trivial para probar con Sinon, haciendo algo como lo siguiente:

sinon.spy(Component.prototype, "methodName");
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

Estoy tratando de recrear esto con Jest de esta manera:

Component.prototype.methodName = jest.fn();
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

Este código falla y lanza el siguiente error:

jest.fn() value must be a mock function or spy.
Received:
  function: [Function bound mockConstructor]

¿Es posible probar esta funcionalidad con Jest? Y si es así, ¿cómo?

Answer 1

La clave es usar el método spyOn . Debería ser así:

const spy = jest.spyOn(Component.prototype, ''methodName'');
const wrapper = mount(<Component {...props} />);
wrapper.instance().methodName();
expect(spy).toHaveBeenCalled();

Como se encuentra aquí, por ejemplo: Probar si la función se llama reaccionar y enzima

Tenga en cuenta que también es una buena práctica borrar la función espiada después de cada ejecución de prueba

let spy

afterEach(() => {
  spy.mockClear()
})

https://facebook.github.io/jest/docs/en/jest-object.html#jestclearallmocks

Answer 2

Sé que es un poco tarde, pero encontré esto y sugeriría que para probar componentDidMount inicie la llamada a su método anidado para que su prueba se vea algo como:

Módulo

componentDidMount() {
  if (this.props.initOpen) {
    this.methodName();
  }
}

Prueba - buena

it(''should call methodName during componentDidMount'', () => {
    const methodNameFake = jest.spyOn(MyComponent.prototype, ''methodName'');
    const wrapper = mount(<MyComponent {...props} />);
    expect(methodNameFake).toHaveBeenCalledTimes(1);
});

Si llama a componentDidMount , su afirmación de que methodName fue llamado a través de componentDidMount es más válida.

Prueba - malo

it(''should call methodName during componentDidMount'', () => {
    const spy = jest.spyOn(Component.prototype, ''methodName'');
    const wrapper = mount(<Component {...props} />);
    wrapper.instance().methodName();
    expect(spy).toHaveBeenCalled();
}

Al escribir la prueba de esta manera, usted llama al método y luego afirma que fue llamado. Lo que por supuesto te habrá dado acaba de llamarlo.