2

contentEditable入力メソッドとして使用するコンポーネントがあります。関心のあるコンポーネントの部分は次のとおりです。

<div className="enter-edit-mode" onClick={view.enterEditMode}>
    <div className="user-input" ref="content" contentEditable onInput={view.textChanged}></div>
</div>

コンポーネントは正常に動作します -textChangedユーザー入力でメソッドに入ります。メソッドは次のようになります。

textChanged: function (e) {
    var view      = this,
        textValue = e.target.innerHTML;

    view.setState({
        enteringText: textValue.length,
        temporaryValue: textValue
    });
}

入力動作をテストしようとすると、直面している問題が発生します。セットアップは酵素、チャイ、シノンで行います。renderComponent酵素のmountメソッドを使用して、単純な関数を使用してコンポーネントをレンダリングしています。

beforeEach(function () {
    view = renderComponent(card);
    viewReact = view.get(0);
});

it('should enter text changed method on input', function () {
    let spy = sinon.spy(viewReact, 'textChanged');
    view.find('.user-input').simulate('input');
    expect(spy).to.have.been.called;
    spy.restore();
});

期待される te​​xtChanged が少なくとも 1 回呼び出されたことが出力されますが、呼び出されたことはありません。ただし、奇妙な部分console.logは、コンポーネントのメソッド内に a を配置すると、そこに到達することです。

私がそれを機能させるために試したこと

  • sinon.stubの代わりに使用spyしてください。メソッドの何かが正しく機能しない可能性があるためです。
  • view.find('.user-input').simulate('input', {target: {value: "lorem"})またはで呼び出す.simulate('input', {key: 'a'})

入力をシミュレートする代わりに を実行するviewReact.textChanged()と、明らかに機能します。

これを引き起こしているのは contentEditable の入力メソッドだと思います。助言がありますか？onInputメソッドにテキストを正しく入力するにはどうすればよいですか? （textChangedメソッドに入っても本文は空）

4

2 に答える 2

1

次のコンポーネントをテストしようとすると、問題を再現できます（これはあなたのものに似ています）：

const MyComponent = React.createClass({
  textChanged(e) { console.log('text changed') },
  render() {
    return (
      <div className="enter-edit-mode">
        <div className="user-input" ref="content" contentEditable onInput={ this.textChanged }></div>
      </div>
    );
  }
});

また、やや複雑な方法でテストを機能させることもできました。

it('should enter text changed method on input', () => {
  let view = mount(<MyComponent/>);
  let spy  = sinon.spy(view.instance(), 'textChanged');
  view     = view.mount();

  view.find('.user-input').simulate('input');
  expect(spy).to.be.called;
  spy.restore();
});

コンポーネントview.mount()を再マウントすることは、ここでうまくいくようです。

Enzyme にはまったく詳しくありませんでしたが (好きですが :)、コンポーネントの周りにさまざまなレイヤーが追加されているように見えます。

考えられる注意事項の 1 つ: このテストはすべてjsdom、ブラウザではなく、Node.js を使用して行いました。

于 2016-06-02T20:10:03.400 に答える