Last active
March 22, 2020 21:15
-
-
Save abstractmachines/180c062794f70e75603e477e53006c02 to your computer and use it in GitHub Desktop.
Repo upgrading: Dummy sagas + test w/ thunks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* To upgrade a repo from using only thunks, to using sagas and thunks, | |
1. Create a dummy saga | |
2. Add in Saga middleware to store configuration, and start/run sagas from store config | |
3. Test sagas (generators with generator.next() { value: someValue, done: false } until { ... done: true } | |
4. Since thunks and sagas can live together in the same repo, you can now move forward with handling async side effects | |
with new code by using sagas (and being able to test them), and slowly migrate your legacy thunks over to sagas over time. | |
*/ | |
// 1. rootSaga.js | |
import { all, call } from 'redux-saga/effects'; | |
import 'regenerator-runtime/runtime'; // Justification: https://github.com/redux-saga/redux-saga/issues/280 | |
function sagaStub() { | |
return console.log('Dummy saga here ...'); | |
} | |
function* dummySaga() { | |
const dummyReturn = yield call(sagaStub); | |
return dummyReturn; | |
} | |
export default function* rootSaga() { | |
try { | |
yield all([ | |
dummySaga(), | |
]); | |
} catch (e) { | |
console.error(e); | |
} | |
} | |
export { dummySaga, sagaStub }; | |
// 2. Store configuration | |
// thunk stuff here ... | |
// 2a. then add the Saga middleware: | |
import createSagaMiddleware from 'redux-saga'; | |
import rootSaga from '<path>/rootSaga'; | |
const sagaMiddleware = createSagaMiddleware(); | |
// 2b. there will be some thunk middleware; add in sagaMiddleware to the end of that array. e.g. | |
const middleware = [ thunk, routerMiddleware(history), createLogger(), otherStuffForThunks, sagaMiddleware ] | |
// 2c. Make sure that middleware, with your sagaMiddleware, is in the createStore() function ... | |
// 2d. Start your sagas. | |
sagaMiddleware.run(rootSaga); | |
// RESULT: This will just log a 'Dummy saga here ...' to Chrome devtools/Console when you npm start/run your app. | |
// It's just a dummy saga; it's not hooked into any actions, watching or listening for actions etc. | |
// 3. sagas-test.js (Enzyme, Jest) | |
import { call } from 'redux-saga/effects'; | |
import { dummySaga, sagaStub } from './rootSaga'; | |
describe('<path>/rootSaga.js', () => { | |
describe('dummySaga', () => { | |
it('should use call saga effect to ret console log', () => { | |
const generator = dummySaga(); | |
const received = generator.next().value; | |
const expected = call(sagaStub); | |
expect(received).toEqual(expected); | |
}); | |
it('should return done after a single yield is completed', () => { | |
const generator = dummySaga(); | |
generator.next(); | |
const next = generator.next(); | |
expect(next.done).toEqual(true); | |
}); | |
it('should return false for generator not done, after a single yield', () => { | |
const generator = dummySaga(); | |
generator.next(); | |
const next = generator.next(); | |
expect(next.done).not.toEqual(false); | |
}); | |
}); | |
}); | |
// Next step: have your sagas listen to actions! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://redux-saga.js.org/docs/advanced/Testing.html
redux-saga/redux-saga#114