前回のjestを使ってReact.jsなコンポーネントをテストするネタを書いたけど、その最後に_mocks_を使うとモック化されるオブジェクトを意図的に別のに差し替えるような事が可能らしいとの事でやってみた

js/components/_tests_/Echo-test.js

"use strict";

// autoMockOffを利用する事でモック化されるオブジェクト等がモック化されなくなるので実体を使ってテストしたいような場合にはこれ使えば良い?
// jest.autoMockOff();

jest.dontMock("../Echo");

var React             = require("react/addons"),
    TestUtils         = React.addons.TestUtils;

describe("Echo", function() {
  it("button click event test", function() {
    var AppActionCreators = require("../../actions/AppActionCreators");
    // 今回は__mocks__にあるオブジェクトを利用してモックオブジェクトを提供するのでやらない
    // AppActionCreators.say.mockReturnValue("A");

    var Echo = require("../Echo");
    var echo = TestUtils.renderIntoDocument(<Echo />);
    expect(echo.state.msg).toEqual("hoge");

    var input = TestUtils.findRenderedDOMComponentWithTag(echo, "input");
    input.props.valueLink.requestChange('fuga');
    expect(echo.state.msg).toEqual("fuga");

    var button = TestUtils.findRenderedDOMComponentWithTag(echo, "button");
    TestUtils.Simulate.click(button.getDOMNode());

    expect(echo.state.msg).toEqual("FUGA");
  });
});

っていうようにAppActionCreatorsはモックオブジェクト化されるのは前回も書いた通りな訳ですけど、AppActionCreatorsがあるディレクトリに_mocks_ディレクトリ作って、そこにモックオブジェクト化されるAppActionCreatorsなのを定義しておけばテスト時にはそれが使用される模様

js/actions/_mocks_/AppActionCreators.js

var AppActionCreators = jest.genMockFunction().mockReturnThis();
AppActionCreators.say = jest.genMockFunction().mockReturnValue("B");

module.exports = AppActionCreators;

っていう感じで作っておけばテスト時にはこっちが呼ばれる模様。でテストを実行すると以下のような結果が得られる

● Echo › it button click event test
  - Expected: 'B' toEqual: 'FUGA'

っていうように_mocks_にモックオブジェクト化されるのを自前で書いて提供したいような場合とかに使える模様

ちなみにreact-boilerplateに入ってるのではAppActionCreatorsに相当する部分でsuperagentを使ってるので_mocks_にsuperagent.jsを作ってそこでレスポンス等を返すようなAPI等をmockReturnValue等を実装しているのでそういう風にやればHTTP通信に及ぶような所もモックを使ってテストしたり出来る模様