Redux - Thử nghiệm
Kiểm tra mã Redux rất dễ dàng vì chúng tôi chủ yếu viết các hàm và hầu hết chúng đều thuần túy. Vì vậy, chúng tôi có thể kiểm tra nó mà không cần chế nhạo họ. Ở đây, chúng tôi đang sử dụng JEST làm công cụ thử nghiệm. Nó hoạt động trong môi trường nút và không truy cập DOM.
Chúng tôi có thể cài đặt JEST với mã được cung cấp bên dưới -
npm install --save-dev jest
Với babel, bạn cần cài đặt babel-jest như sau -
npm install --save-dev babel-jest
Và định cấu hình nó để sử dụng các tính năng babel-preset-env trong tệp .babelrc như sau:
{
"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
}
Cuối cùng, run npm test or npm run test. Hãy để chúng tôi kiểm tra cách chúng tôi có thể viết các trường hợp thử nghiệm cho người tạo và trình giảm bớt hành động.
Các trường hợp thử nghiệm dành cho người sáng tạo hành động
Giả sử bạn có người tạo hành động như hình dưới đây -
export function itemsRequestSuccess(bool) {
return {
type: ITEMS_REQUEST_SUCCESS,
isLoading: bool,
}
}
Người tạo hành động này có thể được kiểm tra như được cung cấp bên dưới:
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)
})
})
Các trường hợp kiểm tra cho bộ giảm tốc
Chúng tôi đã biết rằng bộ giảm tốc sẽ trả về trạng thái mới khi hành động được áp dụng. Vì vậy, bộ giảm tốc được thử nghiệm trên hành vi này.
Hãy xem xét một bộ giảm tốc như được đưa ra bên dưới:
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;
Để kiểm tra bộ giảm tốc ở trên, chúng ta cần chuyển trạng thái và hành động cho bộ giảm tốc và trả về trạng thái mới như hình dưới đây:
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
})
})
})
Nếu bạn không quen với việc viết test case, bạn có thể kiểm tra những điều cơ bản về JEST .