redux-sink provide a simple testing flow, here is the example of testing with `jest` along with `enzyme` and `typescript`
Test sink class
Testing sink classes are simple because sink provides the injections based on containers, simply inject mock objects then you can test the logic of sink
import { mocked } from'ts-jest/utils';import { HttpClient } from'./http-client';import { PatientAddSink } from'./patient-add-sink';jest.mock('./http-client');// create mock object of httpclient which does external requestsconstmockHttpClient=mocked(newHttpClient(),true);describe('sink:: patient-add-sink', () => {beforeEach(() => {// create mock implementation of post to return a promise object// which is the same behavior as normal request callmockHttpClient.post.mockImplementation(x => {returnPromise.resolve({} asany); }); });it('should call api when submit',async () => {// create sink with mock httpclientconstsink=newPatientAddSink(mockHttpClient asany);// set starting statesink.hospital = { name:'test', id:1, waitTime:1 };sink.illness = { name:'test', id:1 };// run sink effectconstpromise=sink.submit();// check state before request finishesexpect(sink.submitting).toBeTruthy();await promise;// check state after request completedexpect(sink.submitting).toBeFalsy();expect(mockHttpClient.post.mock.calls).toHaveLength(1); });});
Test react component
Test the components by mock the useSink and SinkContainer without Provider wrapper
import { shallow } from'enzyme';import*as React from'react';import { SinkContainer } from'redux-sink';import { PatientAddSection } from'../patient-add-section';import { PatientAddSubmit } from'../patient-add-submit';import { PatientAdd } from'./patient-add';import { PatientAddSink } from'./patient-add-sink';// mock original useSink by jest function// return the sink from custom SinkContainer instead of SinkFactoryconstreduxSink=require('redux-sink');constsinkContainer=newSinkContainer();reduxSink.useSink =jest.fn((sink) =>sinkContainer.getSink(sink));// create the container store, which has dispatch and event capabilitysinkContainer.createStore();describe('component:: patient-add', () => {it('should mount', () => {constcontainer=shallow(<PatientAdd />);expect(container.html()).toBeTruthy(); });it('should display hospital when illness selected', () => {// get the sink that used by componentconstsink=sinkContainer.getSink(PatientAddSink);// update the sink statesink.illness = { name:'test', id:1 };// shallow render the component by enzyme// component will updated according to sink stateconstcontainer=shallow(<PatientAdd />);constsections=container.find(PatientAddSection);expect(sections.length).toEqual(2); });});