zoukankan      html  css  js  c++  java
  • [React Testing] The Redux Store

    When using Redux, we can test that our application state changes are working by testing that dispatching actions to the store creates our expected output. In this lesson we will run a few realistic actions back to back (as if the user is using the app) and then test that the state tree looks as we expect it to. These types of tests that ensure all of your redux logic is working as expected give you a lot of value for not too much effort (they test your entire app's state in one big swoop). You may also find it useful to add more granular/individual tests for your reducers and/or actions, which we will cover in other lessons in this course.

    import expect from 'expect';
    import {store} from './store';
    
    describe('store', () => {
    
        it('should initialize', () => {
            const actual = store.getState();
            const expected = {
                quotes: [],
                theme: {
                    color: '#5DC4C6'
                }
            };
            expect(actual).toEqual(expected);
        });
    
        it('should work with a series of actions', () => {
    
            const actions = [
                {
                    type: 'ADD_QUOTE_BY_ID',
                    payload: {
                        text: 'The best way to cheer yourself up is to try to cheer somebody else up.',
                        author: 'Mark Twain',
                        id: 1,
                        likeCount: 24
                    }
                },
                {
                    type: 'ADD_QUOTE_BY_ID',
                    payload: {
                        text: 'Whatever you are, be a good one.',
                        author: 'Abraham Lincoln',
                        id: 2,
                        likeCount: 0
                    }
                },
                {
                    type: 'REMOVE_QUOTE_BY_ID',
                    payload: {id: 1}
                },
                {
                    type: 'LIKE_QUOTE_BY_ID',
                    payload: {id: 2}
                },
                {
                    type: 'LIKE_QUOTE_BY_ID',
                    payload: {id: 2}
                },
                {
                    type: 'UNLIKE_QUOTE_BY_ID',
                    payload: {id: 2}
                },
                {
                    type: 'UPDATE_THEME_COLOR',
                    payload: {color: '#777777'}
                }
            ];
    
            actions.forEach(action => store.dispatch(action));
    
            const actual = store.getState();
            const expected = {
                quotes: [
                    {
                        text: 'Whatever you are, be a good one.',
                        author: 'Abraham Lincoln',
                        id: 2,
                        likeCount: 1
                    }
                ],
                theme: {
                    color: '#777777'
                }
            };
    
            expect(actual).toEqual(expected);
        });
    });
  • 相关阅读:
    如何在phpstorm中安装xdebug调试工具
    php判断远程图片或文件是否存在
    在centos6.7中lnmp环境下安装swoole插件和pthreads插件
    linux中常用的命令
    PHP获取远程文件的几种方式
    TextView实现长按复制功能
    android 字体大小自适应
    Android 相机,视频录制
    转 数据存储方式
    转 String,StringBuffer与StringBuilder的区别??
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5121857.html
Copyright © 2011-2022 走看看