Я пытаюсь сделать простой «поверхностный» тест компонента:
class Background extends React.Component{
selectColor = (e) => {
let bgColor = window.getComputedStyle(e.target)
.getPropertyValue("background-color");
this.props.dispatch(actions.set_bg_color(bgColor));
this.next();
}
next = () => {
this.props.history.push('/editor');
}
render(){
return(
<section className="select-background">
<Menu />
<p className="p-select-background">
Select Background
<span className="p-background-message">
(appears if image is too small to fit screen)
</span>
</p>
<div className="bg-color-palette-container">
<div className="bg-color-palette-wrapper">
<div className="bg-color" onClick={this.selectColor}></div>
<div className="bg-color" onClick={this.selectColor}></div>
<div className="bg-color" onClick={this.selectColor}></div>
<div className="bg-color" onClick={this.selectColor}></div>
<div className="bg-color" onClick={this.selectColor}></div>
<div className="bg-color" onClick={this.selectColor}></div>
<div className="bg-color" onClick={this.selectColor}></div>
<div className="bg-color" onClick={this.selectColor}></div>
</div>
</div>
</section>
)
}
}
const mapToState = (state, props) => ({
bgColor: state.bgColor
})
export default connect(mapToState)(Background);
Вот тест:
import React from 'react';
import {shallow} from 'enzyme';
import store from '../store.js';
import Background from './Background';
describe('<Background />', () => {
it('Renders without crashing', () => {
shallow(<Background store={store}/>);
expect(wrapper.hasClass('select-background')).toEqual(true);
});
});
Это не удается, но если я перейду на .hasClass (''), он пройдет. До этого момента у меня возникали проблемы на каждом этапе, но здесь я не смог найти ни одного работающего решения. Любые предложения по этому или лучшему способу тестирования компонентов React?
Ссылка на репозиторий: https://github.com/matthewmp/memer