reactjs – 测试React Select组件

发布时间：2020-12-15 20:43:35 所属栏目：百科来源：网络整理

导读：https://github.com/JedWatson/react-select 我想使用React-Select react组件,但我需要添加测试. 我已经尝试了谷歌发现的几个选项,但似乎没有任何效果.我有下面的代码,但它不会导致更改事件.我已经能够添加一个焦点事件,它增加了’is-focusedsed’类,但’is-

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!