Ошибка тестирования компонента React с помощью Enzyme: «Нарушение инварианта: вы не должны использовать ‹Link› вне ‹Router›»

Я пытаюсь сделать простой «поверхностный» тест компонента:

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


person DGwang    schedule 12.12.2017    source источник


Ответы (1)


Решено. Пришлось использовать .dive() на мелкой обертке.

person DGwang    schedule 17.12.2017