9

jQueryを使用してイベントをトリガーする非常に単純なReact mixinがあります

MyMixin = {
  trackStructEvent: function () {
    args = Array.prototype.slice.call(arguments);
    $('body').trigger('myEvent', args);
  }
module.exports = MyMixin

これは、browserify を使用して新しいコンポーネント セットの一部としてメイン サイトにインポートされます。これらのコンポーネントを保持するメイン サイトには常に jQuery が含まれるため、重複するため、browserify で jQuery を要求したくありません。

これは動作上の問題ではありませんが、jest を実行してこの mixin を使用してコンポーネントを単体テストすると、エラーが発生して問題が発生します。

ReferenceError: $ is not defined

browserify を介して jQuery を含めることでこれを修正できることはわかっていますが、2 つのコピーがサイトに読み込まれます。

反応コンポーネントにjQueryがすでにウィンドウに存在し、それについて心配しないように冗談で伝える方法はありますか?

4

3 に答える 3

7

私は同様の問題を抱えていますが、これまでのところどこにいるのかがあなたの問題を解決すると思います。$ で jQuery を定義するには、react ファイル内で require を使用する必要があります。

var $ = require('jquery');

MyMixin = {
   trackStructEvent: function () {
      args = Array.prototype.slice.call(arguments);
      $('body').trigger('myEvent', args);
   }
module.exports = MyMixin

次に、jquery をモックしないように jest に指示する必要があります

jest.dontMock('jquery')

次に、jest 単体テストに合格する必要があります (jQuery が行っていることを検証していないと仮定すると、これが私のテストが失敗する場所です)。

また、jQuery が外部であることを browserify に伝える必要があります。その結果、$ へのすべての参照が定義され、テスト用に jquery ライブラリが読み込まれますが、browserify バンドルには含まれません。( browserify-shimを使用)

于 2015-07-01T12:55:53.300 に答える
2

私としては、自分のコンポーネントで jQuery 機能をテストすることに興味はありません。さらに、jQuery は、私のアプリが存在する Web サイト全体で使用され、含まれているため、バンドルに含めていません。したがって、たとえば、次のことを行いました。

// SubmitRender.js

// ...import statements...

var SubmitRender = React.createClass({
  componentWillMount: function () {
    $('form').on('submit', (e)=>{
      this.handleSubmit(e);
    });
  },

  // ...more code...
});
export default SubmitRender;

.

// SubmitRender.spec.js

// ...import statements...

describe('SubmitRender', () => {
  beforeAll(() => {
    // mocking jQuery $()
    global.window.$ = jest.fn(() => {return {on: jest.fn()}});
  });

  it('renders without error', () => {
    expect( () => render(<SubmitRender />) ).not.toThrow();
  });
});

関数を呼び出さないとコンポーネントがマウントされないことはわかってい$ます。jest.fnそのため、その関数をin aでモックアウトするだけbeforeAll()です。これで、実際のコンポーネント内の jQuery 関数がチェーンされていることもわかりました。.on()したがって、jQuery のon. これ以上連鎖することはないので、ここでやめることができます。

連鎖関数のより複雑なセットがある場合は、次のようにすることができます。

beforeAll(() => {
  // mocking jQuery $()
  var fakeQuery = jest.fn(() => {
    return {
      on: fakeQuery,
      off: fakeQuery,
      click: fakeQuery
    }
  })
  global.window.$ = fakeQuery;
});
于 2016-12-08T18:28:47.177 に答える
2

私が行っているのは次のとおりです。

if (process.env.NODE_ENV === 'test') window.$ = require('jquery');

これが誰かに役立つことを願っています！

アップデート：

import $ from 'jquery'jQuery を使用するすべての React ファイルに取り組み始めました。これにより、私が期待する jQuery のタイプである window.$ への依存が取り除かれます (window.$ をいじる他のライブラリの問題に遭遇しました。 bundle size. しかし、バンドルが機能する方法では、これらのインポートはすべてシングルトンを指すため、バンドル サイズは増加しません。

于 2016-08-11T19:10:41.707 に答える