Redux - Test
Tester le code Redux est facile car nous écrivons principalement des fonctions, et la plupart d'entre elles sont pures. On peut donc le tester sans même se moquer d'eux. Ici, nous utilisons JEST comme moteur de test. Il fonctionne dans l'environnement de nœud et n'accède pas au DOM.
Nous pouvons installer JEST avec le code ci-dessous -
npm install --save-dev jest
Avec babel, vous devez installer babel-jest comme suit -
npm install --save-dev babel-jest
Et configurez-le pour utiliser les fonctionnalités babel-preset-env dans le fichier .babelrc comme suit -
{
"presets": ["@babel/preset-env"]
}
And add the following script in your package.json:
{
//Some other code
"scripts": {
//code
"test": "jest",
"test:watch": "npm test -- --watch"
},
//code
}
Finalement, run npm test or npm run test. Voyons comment nous pouvons écrire des cas de test pour les créateurs et les réducteurs d'action.
Cas de test pour les créateurs d'action
Supposons que vous ayez un créateur d'action comme indiqué ci-dessous -
export function itemsRequestSuccess(bool) {
return {
type: ITEMS_REQUEST_SUCCESS,
isLoading: bool,
}
}
Ce créateur d'action peut être testé comme indiqué ci-dessous -
import * as action from '../actions/actions';
import * as types from '../../constants/ActionTypes';
describe('actions', () => {
it('should create an action to check if item is loading', () => {
const isLoading = true,
const expectedAction = {
type: types.ITEMS_REQUEST_SUCCESS, isLoading
}
expect(actions.itemsRequestSuccess(isLoading)).toEqual(expectedAction)
})
})
Cas de test pour les réducteurs
Nous avons appris que le réducteur doit renvoyer un nouvel état lorsque l'action est appliquée. Le réducteur est donc testé sur ce comportement.
Considérez un réducteur comme indiqué ci-dessous -
const initialState = {
isLoading: false
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'ITEMS_REQUEST':
return Object.assign({}, state, {
isLoading: action.payload.isLoading
})
default:
return state;
}
}
export default reducer;
Pour tester le réducteur ci-dessus, nous devons transmettre l'état et l'action au réducteur et renvoyer un nouvel état comme indiqué ci-dessous -
import reducer from '../../reducer/reducer'
import * as types from '../../constants/ActionTypes'
describe('reducer initial state', () => {
it('should return the initial state', () => {
expect(reducer(undefined, {})).toEqual([
{
isLoading: false,
}
])
})
it('should handle ITEMS_REQUEST', () => {
expect(
reducer(
{
isLoading: false,
},
{
type: types.ITEMS_REQUEST,
payload: { isLoading: true }
}
)
).toEqual({
isLoading: true
})
})
})
Si vous n'êtes pas familiarisé avec l'écriture de cas de test, vous pouvez vérifier les bases de JEST .