Невозможно передать реквизит

Question

Я написал сайт реагирования около 6 месяцев назад, и у меня был набор тестов Jest, которые все работали нормально.Я создал второй проект, основанный на этом, но по какой-то причине, когда я пытаюсь написать те же тесты для рендеринга базовых компонентов, они терпят неудачу.

Я получаю ошибку

Инвариантное нарушение: не удалось найти «хранилище» ни в контексте, ни в подпунктах «Connect (ControlBar)».Либо оберните корневой компонент в <Provider>, либо явным образом передайте «store» в качестве реквизита «Connect (ControlBar)».

Я немного прочитал, и есть несколько постовна подобные темы, которые, кажется, говорят, что TypeScript / Redux не очень хорошо играют вместе.Однако в моем последнем проекте это было точно так же, как и выше, и все тесты прошли нормальноПоэтому не уверен, что это просто то, что я вытащил более новую версию чего-то, что вызывает это критическое изменение, но надеюсь, что кто-то может указать на то, что я делаю неправильно?

Мой компонент

interface IControlBarProps {
    includeValidated: boolean, 
    includeValidatedChanged: (includeValidated:boolean) => void,
}

export class ControlBar extends React.Component<IControlBarProps, {}> {
    constructor(props: any) {    
        super(props);                
      }

    public render() { ... }
}

function mapStateToProps(state: IStoreState) {
  return {
    includeValidated: state.trade.includeValidated
  };
}    

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    includeValidatedChanged: (includeValidated:boolean) => {
        dispatch(getIncludeValidatedChangedAction(includeValidated))      
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ControlBar);

Мой тест

import ControlBar from '../ControlBar';

describe('Control Bar Component', () => {

  it('should render without throwing an error', () => {
    const wrapper = shallow(<ControlBar includeValidated={true} includeValidatedChanged={() => {return;}} />);
    expect(wrapper.find('div.Control-bar').exists()).toEqual(true);
  })
})

Answer 1

Вы импортируете компонент ControlBar, упакованный в Redux (экспорт по умолчанию).Для модульного тестирования ControlBar попробуйте

import { ControlBar } from '../ControlBar';

Answer 2

Импорт компонента, не подключенного к Redux, именованный экспорт, а не экспорт по умолчанию для подключенного.

import { ControlBar } from '../ControlBar';