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.