15

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

これは私の反応コンポーネント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 に正しい単語が含まれているかどうかを確認するための基本的なテストを行いたいのですが、実際のオブジェクトを使用したくないため、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 メソッドは何もしない空のメソッドであり、テストが失敗することを意味します。 .

私が間違っていることはありますか？

どうもありがとう

4

3 に答える 3

8

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

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

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

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

于 2015-04-22T18:02:25.393 に答える
1

Jest は自動モッキングを行います。それだけi18n = require('../support/i18n')で十分なはずです。jest.dontMockそのため、通常は最初に電話する必要があります。

詳細については、https ://facebook.github.io/jest/docs/automatic-mocking.html を参照してください。

于 2015-02-14T14:28:35.720 に答える
0

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

しかし、私が見つけたのは、私にとって問題のように思われたのは、jest のセットアップでした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`
))

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

于 2017-02-01T18:03:44.143 に答える