21

実際のDOMノードを取得して、酵素のAPIを使用する必要があるのではなく、Dom APIでクエリできるようにする方法はありますか?たとえば、DOMノード自体についてアサートする必要があるエッジケース用です。

4

6 に答える 6

6

私はこの同じ問題に遭遇しました。私の場合、 でビルドされたものをテストしていましたreact-aria-modal。これは、 でレンダリングされた最初の要素とは異なる DOM の部分でオーバーレイ div をレンダリングしmount()ます。これが適切にレンダリングされることをテストするために、DOM をよりグローバルに調べる必要がありました。このために、 のattachToオプションを使用render()して、テスト DOM が実際のブラウザーで適切に表示されるようにしました。 これは、ドキュメントからのテクニックの良い一般的な説明です。

必要に応じて、DOM のよりローカルな部分 ( findDOMNodeusing instance()) には Tyler Collier のアプローチを使用するか、よりグローバルなビューには私の方法を使用できます。

これは私のユースケースのサンプル仕様で、モック DOM をセットアップ/使用/破棄する方法を示しています。

import MyModalComponent from '../components/my-modal-component'
import React from 'react'
import { jsdom } from 'jsdom'
import { mount } from 'enzyme'

describe('<MyModalComponent /> Component', function(){

  let wrapper

  beforeEach(function(){
    window.document = jsdom('')
    document.body.appendChild(document.createElement('div'))
  })

  afterEach(function(){
    wrapper.detach()
    window.document = jsdom('')
  })

  it('renders the modal closed by default', () => {
    wrapper = mount(
      <MyModalComponent prop1={"foo"}
                        prop2={"bar"}
      />, { attachTo: document.body.firstChild }
    )
    expect(wrapper.html()).to.contain('Content in component')
    expect(document.body.innerHTML).to.not.contain('Content in overlay')
  })

})
于 2016-07-17T18:13:17.070 に答える
1

jsdom を使用して DOM を作成すると、次のようになります。

import jsdom from 'jsdom';
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.document = doc;
global.window = doc.defaultView;

次に、酵素のmount()を使用して、テストしたいものをレンダリングできます。

次に、探しているスタイルに対してアサートできます。

expect(wrapper).to.have.style("display", "none");

于 2016-06-09T16:56:24.790 に答える