Jest.fn()が実際の例で実際にどのように機能するのか、誰でも説明できますか?.
たとえば、Utils関数を使用してボタンをクリックすると国リストを取得するコンポーネントCountryがある場合
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>
);
}
}
使用されるUtils関数
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.fn()
を使用してモック関数を作成できます。
新しい未使用のモック関数を返します。オプションで、モック実装を取ります。
_ const mockFn = jest.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();
_
モック実装の場合:
_ const returnsTrue = jest.fn(() => true);
console.log(returnsTrue()) // true;
_
したがって、次のようにjest.fn()
を使用してgetList
をモックできます。
_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();
});
});
_