---
# System prepended metadata

title: Mocking Flows

---

# Mocking Flows

During design you may want to mock one of the flows you are developing. To do that make sure you are importing `mockedFlows` in `Root.tsx` as seen below

![](https://i.imgur.com/QaJaONE.png)

and replace `export default HOC(tracker, Root)(initialState);` with the commented line
![](https://i.imgur.com/5UBWWEk.png)

# Mock State within flow

Example PINHoc Mock `PinEntry` state
![](https://i.imgur.com/C8nOmMf.png)

Change this.state.currentState to the `mockedState`
![](https://i.imgur.com/C16Jnu1.png)

If the state is not imported already in the HOC component import it as show in the example below.
```
import HOC, {
  mockedMSISDNEntrySuccess,
} from "ouisys-clients/dist/clients/tallyman.v1-moredir/HOC";
```

# Available mocked states

## Pin Pages / PinHOC
* `mockedPINState` => Shows pin input box
* `mockedCompletedState` => Shows Thank You Page

## Mo Pages / MoHOC

* `mockedMSISDNEntrySuccess` => Show Mo Link
* `mockedCompletedState` => Thank you page
* `mockedMSISDNEntryFailure` => MSISD Failur State


## Mo Redirect Pages / MoHOC

* `mockedMSISDNEntrySuccess` => Thank you page with link

# Available Strategy Mock States

To mock a flow replace `export default HOC(tracker, Root)(initialState);` with any of the options below.

```
export default HOC(tracker, Root)(mockedClick2smsFlow, true);
export default HOC(tracker, Root)(mockedPinFlow, true);
export default HOC(tracker, Root)(mockedMOFlow, true);
export default HOC(tracker, Root)(mockedMORedirFlow, true);
export default HOC(tracker, Root)(mockedOneClickFlow, true);
```











