reactjs – 测试React Select组件

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}.

测试

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'
 
});
});

被测组件

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;

命令行
要运行测试我做：

>> npm run test

并在package.js我有这个脚本：

"test": "mocha --compilers js:babel-core/register -w test/browser.js ./new",

测试设置

和browser.js是：

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起

Only solution I found was to simulate a selection through key-down
events:

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')

reactjs – 测试React Select组件

猜你在找的React相关文章