1

React コンポーネントにコンテキストを渡そうとしていますが、Enzyme でテストしているため、コンポーネントをその親に動的に追加して、その状態を調べることができます。テストは次のようになります。

describe('<BeaconConfig />', () => {
  it('inherits the config from BeaconConfig', () => {
    mount(<BeaconConfig persistent><div id="parent"></div></BeaconConfig>, { attachTo: document.body });
    const wrapper = mount(<Beacon/>, { attachTo: document.getElementById('parent') });
    expect(wrapper.state('persistent')).to.be(true);
  });
});

コンテキストを介して継承する必要がありますが、コンポーネントの状態のpersistentプロパティが であるため、テストは失敗します。BeaconundefinedBeaconConfig

Beaconマウント時にJSX内に直接配置しようとすると正常に動作しますが、この場合、ルートではないため、BeaconConfigEnzymeはコンポーネントの状態に到達できません。Beacon

コンポーネントを親に動的に追加したときに、React がコンポーネントにコンテキストを伝播しないのは正常ですか?

4

2 に答える 2

1

React がコンテキストを伝播しないのは普通のことです - React は DOM を見て、それを VDOM とそのように比較しません。

最初のマウントでそれを子にし、MountWrapper ( docs.find() ) のメソッドまたはメソッドを使用して子を掘り下げ、ビーコンを見つけてアサーションを実行する必要があります。.children()

于 2016-06-22T15:39:26.707 に答える
0

最終的に使用した完全なテストは次のとおりです。

describe('Context', () => {
  let wrapper;
  let parent;
  const open = stub().returns({});
  const mockIndexedDB = { open };
  const config = mount(<BeaconConfig persistent position="bottom" indexedDB={mockIndexedDB} />);

  beforeEach(() => {
    parent = document.createElement('div');
    document.body.appendChild(parent);
    wrapper = mount(<Beacon>some text</Beacon>, {
      attachTo: parent,
      context: config.instance().getChildContext()
    });
  });

  afterEach(() => {
    wrapper.detach();
    document.body.removeChild(document.body.firstChild);
  });

  it('overrides the default values with the context if any', () => {
    expect(wrapper.state('persistent')).to.be(true);
    expect(wrapper.state('position')).to.be('bottom');
    expect(open.calledOnce).to.equal(true);
  });
});

@STRML には良い提案がありましたが、ルート以外のコンポーネントの状態にアクセスすることはできないと思います。

代わりに、単独でインスタンス化してその子コンテキストを取得し、それを手動で のパラメーターを使用してBeaconConfig渡します。これは、正しい子コンテキストを作成し、コンテキストを正しく使用することをテストします。後者が子孫である場合に構成を渡すことはテストしませんが、基本的な React 機能であるため、おそらくそれを当然のことと見なすことができます。BeaconoptionsmountBeaconConfigBeaconBeaconConfigBeacon

于 2016-06-23T08:05:28.850 に答える