Блог

Я пытался выполнить тестирование DOM, чтобы проверить, открывается ли диалоговое окно при нажатии кнопки. Затем я получил эту ошибку

Инвариантное нарушение: не удалось найти «хранилище» ни в контексте, ни в реквизитах >»Подключить (фотографии)». Либо оберните корневой компонент в a , либо > явно передайте «store» в качестве реквизита для «Подключения (фотографий)».

Я использовал jest, и мой компонент подключен к хранилищу redux с помощью

экспорт подключения по умолчанию (mapToProps) (Фотографии);

AccessoriesPhotos.js

 class Photos extends React.Component {
    constructor() {
        super();
        this.state = {
            open: false,

        }
        this.handleOpen = this.handleOpen.bind(this);
    }
    handleOpen = () => {
        this.setState({ open: true });
    };

    render (){
        return (....)
    }

    const mapToProps = (state) => {
        return {
          Search: state.Search,
          App: state.App
        }
      }


    export default connect(mapToProps)(Photos);
}
  

AccessoriesPhotos.test.js

 import React from 'react';
import Enzyme, {shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { Photos } from '../../../Photos/Bike/AccessoriesPhotos';

Enzyme.configure({adapter: new Adapter()});

it('Dialog box opens after click', () => {

  const openDialogButton = shallow(<Photos open="true" close="false" />);

  expect(openDialogButton.text()).toEqual('true');

  openDialogButton.find('input').simulate('change');

  expect(openDialogButton.text()).toEqual('false');
});
  

Вот что я получил в результате.

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

Ваш Photos компонент не получает store , поскольку вы не отображаете его как дочерний для Provider в своем тесте. Если вы также обернете ее в Provider для теста, она будет работать так, как ожидалось.

 const openDialogButton = shallow(
  <Provider store={store}>
    <Photos open="true" close="false" />
  </Provider>
);