React-Redux 容器测试单元答案

【问题标题】：React-Redux Container TestUnitReact-Redux 容器测试单元
【发布时间】：2020-07-07 01:57:26
【问题描述】：

我是 React with Redux 的新手，我正在尝试为一个连接到呈现表格的对话框的容器创建一个 TestUnit。

在我拥有的容器中：

一个 mapStateToProps 常量，它返回属性与表格对话。
将函数映射到动作的 mapDispatchToProps 常量
一个连接函数，将上面的 2 个道具绑定到对话框。

容器：

 import { ApplicationState } from '../ApplicationState';
 import { connect } from 'react-redux';
 import TabelDialog, { TabelDialogProps } from '../components/dialogs/TabelDialog';
 import { acceptDisplay } from '../actions/displayActions';

 const mapStateToProps=(
    state: ApplicationState,
    { open, onClose }: TabelDialogProps)
    => {
     return {
       open,
       onClose,
       tableData: [
         {
            manufacturer: 'Samsung',
            displayType: 'OLED',
         },
         {
            manufacturer: 'LG',
            displayType: 'OLED',
         }
       ]
    }         
 };

 const mapDispatchToProps = {
    onAccept: acceptDisplay
 };

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

测试未完成，需要调整：

const createMockStore = () => {
    const store = {
      getState: jest.fn(() => ({})),
      dispatch: jest.fn(),
      data: jest.fn()
   }

 const next = jest.fn()
 const invoke = action => thunk(store)(next)(action)

 return {store, next, invoke }


}

describe('Container test', () => {
     it('should dispatch open', () => {
       const store = createMockStore();
       const wrapper = shallow(
             <TabelDialog 
                 open = {true}
                 data = {undefined}
                 onClose = {undefined}
                 onAccept = {undefined}
            />
        );

      expect(store).toHaveBeenCalled():
  });
})

我想打开、onClose 和数据。我走对了吗？

安迪

【问题讨论】：

标签： reactjs typescript unit-testing testing react-redux

【解决方案1】：

不确定这是否能解决您的问题，但也许会给您一些进步。似乎您还必须为组件提供商店。

const store = {...}

const wrapper = shallow(<TabelDialog store={store}  ... />);

【讨论】：