2017-07-28 10 views
3

私はラベルといくつかのオプションで選択要素をレンダリングするReactにドロップダウンコンポーネントを持っています。Reactのselect要素にEnzymeを使ってフォーカスがあるかどうかをテストする方法は?

import React from 'react'; 
import { shallow, mount } from 'enzyme'; 
import Dropdown from './Dropdown'; 

describe('Dropdown',() => { 
    it('should be focused on label click',() => { 
    const wrapper = mount(
     <div> 
     <label htmlFor={'dropdownId'}>Sort by: </label> 
     <Dropdown 
      id="dropdownId" 
      options={[ 
      { key: '', display: 'Please select a value' }, 
      { key: 'NJ', display: 'New Jersey' }, 
      { key: 'NY', display: 'New York' }, 
      ]} 
     /> 
     </div>, 
    ); 

    const dropdownLabel = wrapper.find('label'); 
    const dropdownSelect = wrapper.find(Dropdown); 

    dropdownLabel.simulate('click', {}); 
    expect(dropdownSelect.is(':focus')).toBe(true); 
    }); 
}); 

私はselect要素がフォーカスを持っているだろうかどうかをテストするために、ラベルのクリックをシミュレートしようとしているが、次のエラーを取得しています:TypeError: Enzyme received a pseudo-class CSS selector (':focus') that it does not currently support in tests.webpack.js

アイムここに私のテストのように見えるものがありますPhantomJSバージョンを使用してください2.1.1

CSS疑似セレクタを使用せずにテストの目的を複製する方法はありますか?

ありがとうございました。

答えて

関連する問題