Type '{ store: MockStoreEnhanced<unknown, {}>; }' is not assignable to type 'IntrinsicAttributes & Pick[...]

Viewed 474

I am trying to write a unit test for a container in typescript.

According to multiple answers, I am supposed to use a mock store, and give it to the container using the store attribute, which always exists. This seems to work only in javascript though:

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);
  });
});

However I got the following error on the line const renderedComponent = shallow(<DashboardChooserContainer store={store}/>); for the store= part:

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)

Actually - as I am just trying to bootstrap the project - at this point DashboardChooserContainer does not have any property:

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/>
  }
}

My goal now is to write enough tests for DashboardChooserContainer so it is fully covered.

1 Answers

The solution was to wrap it to a <Provider>. I have no idea why, though.

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