[解決済み] jest.fn()の機能と使い方を教えてください。

質問

を説明できる人はいますか？ jest.fn() 実際にどのように使うのか、どこで使わなければならないのか、混乱しているので、実際の例を挙げて説明します。

例えば、Countriesというコンポーネントがあり、ボタンをクリックするとUtils Functionの助けを借りて国のリストを取得するとします。

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

  }
}

使用したユーティリティ関数

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

を使用することができます。 Jest.fn() をテストするにはどうすればよいですか？ getList 関数が呼び出されるのでしょうか？

どのように解決するのですか？

Jestモックファンクション

モック関数は別名「スパイ」とも呼ばれ、単に出力をテストするだけでなく、他のコードから間接的に呼び出される関数の挙動をスパイすることができるからです。モック関数を作成するには jest.fn() .

のドキュメントを確認してください。 jest.fn()

新しい、未使用のモック関数を返します。オプションでモックの実装を受け取ります。

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

モック実装で

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

だから、モックを作ることができる getList を使って jest.fn() を以下のように設定します。

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