React 16 JestユニットテストのMock Functions(Mock Return Value)

転載先
React 16 JestユニットテストのMock Functions(Mock Return Value)
プロジェクト初期化【ここでは以前のプロジェクトを使用し、時間を節約する】
プロジェクト初期化アドレス

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.20

ひっぱり

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.20
npm install 

Mock Return Values
Jestのシミュレーション関数(Mock function)は、次のようにテスト値をテストのコードに注入するためにも使用できます.

const myMock = jest.fn();
console.log(myMock);

myMock
  .mockReturnValueOnce(10)
  .mockReturnValueOnce('x')
  .mockReturnValue(true);

console.log(myMock(), myMock(), myMock(), myMock(), myMock());

npx jest src/_を実行tests__/jest_mock_return_values.test.js--notify--watchman=falseの結果は次のようになります.

console.log src/__tests__/jest_mock_return_values.test.js:2
{ [Function: mockConstructor]
    _isMockFunction: true,
    getMockImplementation: [Function],
    mock: [Getter/Setter],
    mockClear: [Function],
    mockReset: [Function],
    mockRestore: [Function],
    mockReturnValueOnce: [Function],
    mockResolvedValueOnce: [Function],
    mockRejectedValueOnce: [Function],
    mockReturnValue: [Function],
    mockResolvedValue: [Function],
    mockRejectedValue: [Function],
    mockImplementationOnce: [Function],
    mockImplementation: [Function],
    mockReturnThis: [Function],
    mockName: [Function],
    getMockName: [Function] }

console.log src/__tests__/jest_mock_return_values.test.js:9
10 'x' true true true

シミュレーション関数(Mock function)は、関数continuation-passingスタイルを使用するコードにおいても非常に有効である.このスタイルで記述されたコードは、複雑なルートを必要としないで、それらが表す実際のコンポーネントの動作を再作成するのに役立ち、それらを使用する前にテストに直接値を注入する傾向があります.具体的には次のコードを参照してください.

const filterTestFn = jest.fn();

//    mock  true,   mock  false
filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);

const result = [11, 12].filter(filterTestFn);

console.log(result);
console.log(filterTestFn.mock.calls);

npx jest src/_を実行tests__/jest_mock_return_values.test.js--notify--watchman=falseの結果は次のようになります.

console.log src/__tests__/jest_mock_return_values.test.js:20
[ 11 ]

console.log src/__tests__/jest_mock_return_values.test.js:22
[ [ 11, 0, [ 11, 12 ] ], [ 12, 1, [ 11, 12 ] ] ]

現実世界の多くの例は,実際には依存するコンポーネント上でシミュレーション関数を取得して構成されているが,技術は同じである.これらの場合、直接テストされていない関数の内部で論理を実現することはできるだけ避けます.
プロジェクト実践アドレス

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.21