I'm currently working on creating a unit test for a container in TypeScript.
From what I've gathered from various responses, it's recommended to use a mock store and pass it to the container using the store attribute. This method seems to only work 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, when I tried implementing this with TypeScript, I encountered an error at
const renderedComponent = shallow(<DashboardChooserContainer store={store}/>);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<...>)'.ts(2322)
Considering that I'm still setting up the project, DashboardChooserContainer doesn't have any properties at this stage:
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 main objective now is to create sufficient tests for DashboardChooserContainer to ensure full coverage.