https://github.com/JedWatson/react-select
Я хотел бы использовать React-Select реагирующий компонент, но мне нужно добавить тесты.
Я пробовал несколько вариантов, которые я нашел с Google, но, похоже, ничего не работает. У меня есть код ниже, но он не вызывает событие изменения. Мне удалось добавить событие фокуса, которое добавляет класс "is-focus", но класс "is-open" все еще отсутствует.
Я использовал: https://github.com/JedWatson/react-select/blob/master/test/Select-test.js в качестве ссылки
Я пытался использовать событие изменения только в поле ввода, но это тоже не помогло. Я заметил, что для onInputChange={this.change} есть 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
Любая помощь будет оценена