Jest提供了一种模拟函数的方法,如文档中所述
apiGetMethod = jest.fn().mockImplementation( new Promise((resolve,reject) => { const userID = parseInt(url.substr('/users/'.length),10); process.nextTick( () => users[userID] ? resolve(users[userID]) : reject({ error: 'User with ' + userID + ' not found.',}); ); }); );
describe('example test',() => { it('uses the mocked function',() => { apiGetMethod().then(...); }); });
如果我有一个如此定义的React组件,我该如何模拟它?
import { apiGetMethod } from './api'; class Foo extends React.Component { state = { data: [] } makeRequest = () => { apiGetMethod().then(result => { this.setState({data: result}); }); }; componentDidMount() { this.makeRequest(); } render() { return ( <ul> { this.state.data.map((data) => <li>{data}</li>) } </ul> ) } }
我不知道如何制作它,所以Foo组件调用我的模拟apiGetMethod()实现,以便我可以测试它是否正确呈现数据.
(这是一个简化的,人为的例子,为了理解如何模拟内部反应组件的函数)
编辑:api.js文件为清楚起见
// api.js import 'whatwg-fetch'; export function apiGetMethod() { return fetch(url,{...}); }
您必须像这样模拟./api模块并导入它,以便您可以设置模拟的实现
import { apiGetMethod } from './api' jest.mock('./api',() => ({ apiGetMethod: jest.fn() }))
在您的测试中可以使用mockImplementation设置模拟应该如何工作:
apiGetMethod.mockImplementation(() => Promise.resolve('test1234'))