类型'{ store: MockStoreEnhanced<unknown，{}>；}‘不能赋值给类型'IntrinsicAttributes & Pick[...]

Question

我正在尝试用typescript编写一个容器的单元测试。

根据多个答案，我应该使用模拟存储，并使用store属性将其提供给容器，该属性始终存在。不过，这似乎只在javascript中有效：

import React from "react";
import configureMockStore from "redux-mock-store";
import DashboardChooserContainer from "../../src/dashboard/DashboardChooserContainer";
import { shallow, mount } from "enzyme";


describe("/dashboard/DashboardChooserContainer", () => {
  const mockStore = configureMockStore();
  const store = mockStore(
    {}
  );
    const renderedComponent = shallow(<DashboardChooserContainer store={store}/>);
  
  it("some test will go here", () => {
    expect(
      renderedComponent.contains("a")
    ).toBe(true);
  });
});

但是，我在store=部件的const renderedComponent = shallow(<DashboardChooserContainer store={store}/>);行上得到了以下错误：

Type '{ store: MockStoreEnhanced<unknown, {}>; }' is not assignable to type '(IntrinsicAttributes & Pick<unknown, never>) | (IntrinsicAttributes & Pick<Pick<unknown, never>, never> & Pick<InferProps<unknown>, never>) | (IntrinsicAttributes & ... 2 more ... & Partial<...>) | (IntrinsicAttributes & ... 2 more ... & Partial<...>)'.
  Property 'store' does not exist on type '(IntrinsicAttributes & Pick<unknown, never>) | (IntrinsicAttributes & Pick<Pick<unknown, never>, never> & Pick<InferProps<unknown>, never>) | (IntrinsicAttributes & ... 2 more ... & Partial<...>) | (IntrinsicAttributes & ... 2 more ... & Partial<...>)'.ts(2322)

实际上-因为我只是试图引导项目-在这一点上，DashboardChooserContainer没有任何属性：

import { connect } from "react-redux";
import DashboardChooserUI from "dashboard/DashboardChooserUI";
import { GlobalState } from "GlobalState"

type ReduxDispatch = CallableFunction;
interface IDashboardProps {
}

function mapStateToProps(state:GlobalState):IDashboardProps {
  return {};
}

interface IRegistrationActionProps {
}


function mapDispatchToProps(dispatch:ReduxDispatch):IRegistrationActionProps {
  return {};
}


export default connect<IDashboardProps, IRegistrationActionProps, {}, GlobalState>(mapStateToProps,mapDispatchToProps)(DashboardChooserUI);

DashboardChooseUI：

import React, { ReactElement } from "react";
import DashboardUI from "./DashboardUI";


export default class DashboardChooserUI extends React.Component<{},{}> {

  render () {
    return <DashboardUI/>
  }
}

我现在的目标是为DashboardChooserContainer编写足够的测试，以便完全覆盖它。

Answer 1

解决方案是将其包装到一个<Provider>中。不过，我不知道为什么。

const renderedComponent = mount(
  <Provider store={mockStore()}>
    <DashboardChooserContainer />
  </Provider>,
);