https://github.com/JedWatson/react-select
我想使用React-Select react组件,但我需要添加测试.
我已经尝试了谷歌发现的几个选项,但似乎没有任何效果.我有下面的代码,但它不会导致更改事件.我已经能够添加一个焦点事件,它增加了’is-focusedsed’类,但’is-open’类仍然缺失.
我用过：https://github.com/JedWatson/react-select/blob/master/test/Select-test.js作为参考
我曾尝试仅在输入字段上使用更改事件,但这也没有帮助.我注意到select有一个onInputChange = {this.change}.
测试
@H_403_11@import Home from '../../src/components/home'; import { mount } from 'enzyme' describe('Home',() => { it("renders home",() => { const component = mount(<Home/>); // default class on .Select div // "Select foobar Select--single is-searchable" const select = component.find('.Select'); // After focus event // "Select foobar Select--single is-searchable is-focussed" // missing is-open TestUtils.Simulate.focus(select.find('input')); //this is not working TestUtils.Simulate.keyDown(select.find('.Select-control'),{ keyCode: 40,key: 'ArrowDown' }); TestUtils.Simulate.keyDown(select.find('.Select-control'),{ keyCode: 13,key: 'Enter' }); // as per code below I expect the h2 to have the select value in it eg 'feaure' }); });被测组件
@H_403_11@import React,{ Component } from 'react'; import Select from 'react-select'; class Home extends Component { constructor(props) { super(props); this.state = { message: "Please select option"}; this.change = this.change.bind(this); } change(event) { if(event.value) { this.setState({message: event.label}); } } render () { const options = [ {label: 'bug',value: 1},{label: 'feature',value: 2 },{label: 'documents',value: 3},{label: 'discussion',value: 4}]; return ( <div className='content xs-full-height'> <div> <h2>{this.state.message}</h2> <Select name="select" value={this.state.message} options={options} onInputChange={this.change} onChange={this.change} /> </div> </div> ); } } export default Home;命令行
要运行测试我做：
并在package.js我有这个脚本：
@H_403_11@"test": "mocha --compilers js:babel-core/register -w test/browser.js ./new",测试设置
和browser.js是：
@H_403_11@import 'babel-register'; import jsdom from 'jsdom'; const exposedProperties = ['window','navigator','document']; global.document = jsdom.jsdom('<!doctype html><html><body></body></html>'); global.window = document.defaultView; Object.keys(document.defaultView).forEach((property) => { if (typeof global[property] === 'undefined') { exposedProperties.push(property); global[property] = document.defaultView[property]; } }); global.navigator = { userAgent: 'node.js' };我也尝试过使用此处概述的测试方法：https://github.com/StephenGrider/ReduxSimpleStarter
任何帮助将不胜感激
从
https://github.com/JedWatson/react-select/issues/1357起
原文链接：https://www.f2er.com/react/300788.html@H_403_11@wrapper.find('.Select-control').simulate('keyDown',{ keyCode: 40 }); // you can use 'input' instead of '.Select-control' wrapper.find('.Select-control').simulate('keyDown',{ keyCode: 13 }); expect(size).to.eql('your first value in the list')Only solution I found was to simulate a selection through key-down
events:
