Question

大约6个月前，我写了一个react网站，并进行了一系列的Jest测试，一切运行良好。我已经基于该项目创建了第二个项目，但是由于某种原因，当我尝试在基本组件渲染上编写相同的测试时，它们失败了。

我得到的错误是

永久违反：在上下文或以下环境中均找不到“存储” “ Connect（ControlBar）”的道具。可以将根组件包装在 <Provider>，或显式传递“ store”作为道具 “连接（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

导入未连接到Redux的组件，即命名导出，而不是已连接组件的默认导出。

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

Answer 2

您导入包裹有Redux的ControlBar组件（默认导出）。要对ControlBar进行单元测试，请尝试

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

无法通过道具

2 个答案: