web-dev-qa-db-ja.com

Jest-React Component内で呼び出される関数をモックします

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()実装を呼び出して、データを使用して正しくレンダリングされることをテストできるようにする方法がわかりません。

（これは、reactコンポーネントの内部で呼び出される関数をモックする方法を理解するために、単純化され、考案された例です）

編集：わかりやすくするためにapi.jsファイル

_// api.js
import 'whatwg-fetch';

export function apiGetMethod() {
   return fetch(url, {...});
}
_
unit-testingreactjsmockingjestjs
7
Ryan Castner

このように./apiモジュールをモックしてインポートする必要があるので、モックの実装を設定できます。

import { apiGetMethod } from './api'

jest.mock('./api', () => ({ apiGetMethod: jest.fn() }))

テストでは、モックの動作を mockImplementation を使用して設定できます。

apiGetMethod.mockImplementation(() => Promise.resolve('test1234'))
12
Andreas Köberle

jest.mock @Andreasの回答のメソッドは機能しませんでした。テストファイルで次のことを試すことができます。

const api = require('./api');
api.apiGetMethod = jest.fn(/* Add custom implementation here.*/);

これにより、apiGetMethodコンポーネント内でモックバージョンのFooが実行されます。

6
Nahush Farkande

これを模擬する別の解決策は次のとおりです。

window['getData'] = jest.fn();
0
Dan