web-dev-qa-db-fra.com

Comment fonctionne jest.fn ()

Quelqu'un peut-il expliquer comment jest.fn () fonctionne réellement avec un exemple du monde réel, car je suis littéralement confus sur la façon de l'utiliser et où il doit être utilisé.

Par exemple, si j'ai le composant Pays qui récupère la liste des pays en cliquant sur un bouton à l'aide de la fonction Utils

export default class Countries extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      countryList:''
    }
  }

  getList() {
    //e.preventDefault();
    //do an api call here
    let list = getCountryList();
    list.then((response)=>{ this.setState({ countryList:response }) });
  }

  render() {

    var cListing = "Click button to load Countries List";

    if(this.state.countryList) {
      let cList = JSON.parse(this.state.countryList);
      cListing = cList.RestResponse.result.map((item)=> { return(<li key={item.alpha3_code}> {item.name} </li>); });
    }

    return (
      <div>
        <button onClick={()=>this.getList()} className="buttonStyle"> Show Countries List </button>
        <ul>
          {cListing}
        </ul>
      </div>
    );

  }
}

Fonction utils utilisée

const http = require('http');


    export function getCountryList() {
      return new Promise(resolve => {
        let url = "/country/get/all";
        http.get({Host:'services.groupkt.com',path: url,withCredentials:false}, response => {
          let data = '';
          response.on('data', _data => data += _data);
          response.on('end', () => resolve(data));
        });
      });


    }

où pourrais-je utiliser Jest.fn () ou comment puis-je tester la fonction getList est appelée lorsque je clique sur le bouton

unit-testingreactjses6-promisejestjs
19
NaveenThally

Fonctions Jest Mock

Les fonctions de simulation sont également appelées "espions", car elles vous permettent d'espionner le comportement d'une fonction appelée indirectement par un autre code, plutôt que de simplement tester la sortie. Vous pouvez créer une fonction fictive avec jest.fn().

Consultez la documentation de jest.fn()

Renvoie une nouvelle fonction de simulation inutilisée. Prend éventuellement une implémentation fictive.

  const mockFn = jest.fn();
  mockFn();
  expect(mockFn).toHaveBeenCalled();

Avec une implémentation simulée:

  const returnsTrue = jest.fn(() => true);
  console.log(returnsTrue()) // true;

Vous pouvez donc vous moquer de getList en utilisant jest.fn() comme suit:

jest.dontMock('./Countries.jsx');
const React = require('react/addons');
const TestUtils = React.addons.TestUtils;
const Countries = require('./Countries.jsx');

describe('Component', function() {
  it('must call getList on button click', function() {
    var renderedNode = TestUtils.renderIntoDocument(<Countries />);
    renderedNode.prototype.getList = jest.fn()

    var button = TestUtils.findRenderedDOMComponentWithTag(renderedNode, 'button');

    TestUtils.Simulate.click(button);

    expect(renderedNode.prototype.getList).toBeCalled();
  });
});
23
Yadhu Kiran