web-dev-qa-db-ja.com

Jestで自分のファイルの1つを手動でモックする方法を教えてください。

Jestで（作成した）オブジェクトをモックしようとしているので、reactコンポーネント内でデフォルトの動作を提供できます（実際の実装は使用されません）

これは私のreactコンポーネントChatAppです（非常に簡単です）

'use strict';
var React, ChatApp, ChatPanel, i18n;

React = require('react');
ChatPanel = require('./chat_panel');
i18n = require('../support/i18n');

ChatApp = React.createClass({
  render() {
    return (
      <div className="chat-app">
        <h1>{i18n.t("app.title")}</h1>
        <ChatPanel />
      </div>
    );
  }
});

module.exports = ChatApp;

したがって、変換を行うカスタムI18n依存関係があります（I18nは、node-polyglotのラッパーである私が作成したものです）。

したがって、H1に正しいWordが含まれているかどうかを確認するための基本的なテストを行いたいのですが、実際のオブジェクトを使用したくないため、I18nオブジェクトにjest.dontMock（）を設定したくありません。 ChatAppテストで。

したがって、jest Webサイトの基本的な手順に従って、mocksフォルダーを作成し、i18nのモックファイルを作成しました。このファイルは、元のオブジェクトからモックを生成し、tメソッドをオーバーライドして、許可するメソッドを追加します。 tの戻り文字列を設定します。

これはモックオブジェクトです

'use strict';
var i18nMock, _returnString;

i18nMock = jest.genMockFromModule('../scripts/support/i18n');

_returnString = "";

function __setReturnString(string) {
  _returnString = string;
}

function t(key, options = null) {
  return _returnString;
}

i18nMock.t.mockImplementation(t);
i18nMock.__setReturnString = __setReturnString;

module.exports = i18nMock;

今私のChatAppテストでは、次のように、それぞれの前にモックが必要です。

'use strict';
var React, ChatApp, TestUtils, path;

path = '../../../scripts/components/';
jest.dontMock( path + 'chat_app');

React = require('react/addons');
ChatApp = require( path + 'chat_app');
TestUtils = React.addons.TestUtils;

describe('ChatApp', () => {
  beforeEach(() => {
    require('i18n').__setReturnString('Chat App');
  });

  var ChatAppElement = TestUtils.renderIntoDocument(<ChatApp />);

  it('renders a title on the page', () => {
    var title = TestUtils.findRenderedDOMComponentWithTag(ChatAppElement, 'h1');
    expect(title.tagName).toEqual('H1');
    expect(title.props.children).toEqual('Chat App');
  });
});

テスト内でi18nオブジェクトをconsole.logすると、正しいモックオブジェクトが取得され、__ setReturnStringもトリガーされます（そのメッセージでconsole.logを実行するかのように、ログが表示されます）。

ただし、実際のReactコンポーネント内でi18nオブジェクトをconsole.logすると、Jestモックは取得されますが、Jestモックは取得されないため、tメソッドは空のメソッドです。何もしない、つまりテストが失敗する。

私が間違っていることについて何か考えはありますか？

どうもありがとう

javascriptunit-testingreactjsjestjs
13
TheStoneFox

___mocks___フォルダーも機能させるのに問題がありました。私がそれを回避する方法は、jest.setMock();メソッドを使用することです。

あなたの場合、あなたはjest.setMock('../../../scripts/i18n/', require('../__mocks__/i18n');でしょう

明らかに、モックの場所と使用している実際のライブラリの場所はわかりませんが、最初のパラメーターは実際のモジュールが保存されているパスを使用し、2番目のパラメーターはモックが保存されているパスを使用する必要があります。

これにより、モジュールと、必要なすべてのモジュール（Reactを含む）が手動でモックされたi18nモジュールを使用するように強制されます。

7
MattyKuzyk

Jestは自動モックを実行します。 i18n = require('../support/i18n')だけで十分です。そのため、通常、最初にjest.dontMockを呼び出す必要があります。

詳細については、こちらをご覧ください： https://facebook.github.io/jest/docs/automatic-mocking.html

1
kraf

mattykuzyk で言及していること 彼の答え 私にとってはまったく機能しませんでした:(

しかし、私にとって問題であることがわかったのは、冗談の設定でした。最初はmoduleNameMapperを使用しましたが、何らかの理由でこれらは決して嘲笑されません...

したがって、私にとって最初のステップは、代わりにモジュール名がマップされたフォルダーをmoduleDirectoriesに移動して、何かを機能させることでした。

その後、実際の実装に隣接して__mocks__ファイルを追加するだけで済みます（私の場合はutils/translation.jsとutils/__mocks__/translation.js）。私のtranslations.jsのデフォルトは翻訳関数をエクスポートするので、私はデフォルトでモックもエクスポートしました。 __mocks__/translations.js全体は非常に単純で、次のようになります。

export default jest.fn((key, unwrap = false) => (
    unwrap && `${key}-unwrapped` || `${key}-wrapped`
))

私はそれをテストしていませんが、__setReturnStringを追加するのは簡単なはずです。私にとっては、実際に翻訳キーを返すだけで十分でした。お役に立てれば！

0
Iris Schaffer