javascript - tag - title of page html

Se llama a la función spyOn

Question

Estoy tratando de escribir una prueba simple para un componente React simple, y quiero usar Jest para confirmar que se ha llamado a una función cuando simulo un clic con una enzima. De acuerdo con los documentos de Jest, debería poder usar spyOn para hacer esto: spyOn .

Sin embargo, cuando intento esto, TypeError: Cannot read property ''_isMockFunction'' of undefined obteniendo TypeError: Cannot read property ''_isMockFunction'' of undefined que entiendo que significa que mi espía no está definido. Mi código se ve así:

import React, { Component } from ''react'';
import logo from ''./logo.svg'';
import ''./App.css'';
class App extends Component {

  myClickFunc = () => {
      console.log(''clickity clickcty'')
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro" onClick={this.myClickFunc}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

y en mi archivo de prueba:

import React from ''react'';
import ReactDOM from ''react-dom'';
import App from ''./App'';
import { shallow, mount, render } from ''enzyme''

describe(''my sweet test'', () => {
 it(''clicks it'', () => {
    const spy = jest.spyOn(App, ''myClickFunc'')
    const app = shallow(<App />)
    const p = app.find(''.App-intro'')
    p.simulate(''click'')
    expect(spy).toHaveBeenCalled()
 })
})

¿Alguien tiene una idea de lo que estoy haciendo mal?

Answer 1

En su código de prueba, está intentando pasar la App a la función spyOn, pero spyOn solo funcionará con objetos, no con clases. Generalmente necesitas usar uno de los dos enfoques aquí:

1) Cuando el controlador de clic llama a una función pasada como prop, por ejemplo

class App extends Component {

  myClickFunc = () => {
      console.log(''clickity clickcty'');
      this.props.someCallback();
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro" onClick={this.myClickFunc}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

Ahora puede pasar una función de espía como apoyo al componente y afirmar que se llama:

describe(''my sweet test'', () => {
 it(''clicks it'', () => {
    const spy = jest.fn();
    const app = shallow(<App someCallback={spy} />)
    const p = app.find(''.App-intro'')
    p.simulate(''click'')
    expect(spy).toHaveBeenCalled()
 })
})

2) Cuando el controlador de clic establece algún estado en el componente, por ejemplo

class App extends Component {
  state = {
      aProperty: ''first''
  }

  myClickFunc = () => {
      console.log(''clickity clickcty'');
      this.setState({
          aProperty: ''second''
      });
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro" onClick={this.myClickFunc}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

Ahora puede hacer afirmaciones sobre el estado del componente, es decir,

describe(''my sweet test'', () => {
 it(''clicks it'', () => {
    const app = shallow(<App />)
    const p = app.find(''.App-intro'')
    p.simulate(''click'')
    expect(app.state(''aProperty'')).toEqual(''second'');
 })
})

Answer 2

Hola amigo, sé que llego un poco tarde aquí, pero casi spyOn sin ningún cambio, además de cómo spyOn . Cuando usas el espía, tienes que observar el prototipo del componente.

El orden de adjuntar el espía en el prototipo de clase y la representación (renderización superficial) de su instancia son importantes.

const spy = jest.spyOn(App.prototype, "myClickFn");
const instance = shallow(<App />);

El bit App.prototype en la primera línea es lo que necesitabas para hacer que las cosas funcionen. Una class javascript no tiene ninguno de sus métodos hasta que usted la crea con new MyClass() , o se sumerge en el MyClass.prototype . Para su pregunta en particular, solo necesitaba espiar el método de myClickFn .

Espero que esto ayude a cualquier otra persona que, de lo contrario, intentaría pasar un accesorio a su aplicación solo para hacer un pase de prueba.

EDITAR: Si desea comprobar los efectos secundarios de su myClickFn , puede invocarlo en una prueba por separado.

const app = shallow(<App />);
app.instance().myClickFn()
/*
Now assert your function does what it is supposed to do...
eg.
expect(app.state("foo")).toEqual("bar");
*/

Answer 3

Ya casi estás ahí. Aunque estoy de acuerdo con la respuesta de @Alex Young sobre el uso de accesorios para eso, simplemente necesitas una referencia a la instance antes de intentar espiar el método.

describe(''my sweet test'', () => {
 it(''clicks it'', () => {
    const app = shallow(<App />)
    const instance = app.instance()
    const spy = jest.spyOn(instance, ''myClickFunc'')

    instance.forceUpdate();    

    const p = app.find(''.App-intro'')
    p.simulate(''click'')
    expect(spy).toHaveBeenCalled()
 })
})

Docs: http://airbnb.io/enzyme/docs/api/ShallowWrapper/instance.html