输入'{ store: MockStoreEnhanced<unknown, {}>; }' 不可分配给类型 'IntrinsicAttributes & Pick[...]答案

【问题标题】：Type '{ store: MockStoreEnhanced<unknown, {}>; }' is not assignable to type 'IntrinsicAttributes & Pick[...]输入'{ store: MockStoreEnhanced<unknown, {}>; }' 不可分配给类型 'IntrinsicAttributes & Pick[...]
【发布时间】：2020-11-09 16:42:48
【问题描述】：

我正在尝试在 typescript 中为容器编写单元测试。

根据多个答案，我应该使用模拟商店，并使用商店属性将其提供给容器，该属性始终存在。不过，这似乎只在 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);
  });
});

但是我在const renderedComponent = shallow(<DashboardChooserContainer store={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 编写足够多的测试，以便完全覆盖它。

【问题讨论】：

标签： typescript react-redux jestjs

【解决方案1】：

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

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

【讨论】：