[React源码剖析系列 － 生命周期的管理艺术] (https://www.w3ctech.com/topic/1596)

Paste_Image.png

MobX 相关

http://www.tuicool.com/articles/UZVZJnY

Redux 对 action / event 作出反应，而 MobX 对 state 变化作出反应。在更新逻辑方面，MobX 是在 store 内进行相应封装，假设一个 UI 操作需要更新多个 store 内的值时，那么我们需要多次触发对应 action，或者在多个 store 上再添加一个 store 去进行控制，这都不如 Redux 来得优雅，Redux 只需要触发一个 action，多个 reducer 可响应相同的 action type，即可完成更新。

深入mobx原理

首先，让我们来回顾一下mobx的核心概念：
可观测状态
状态是指任何可以改变并且会引发计算属性变化的值。mobx可以把大多数类型的值(基础类型、数组、各种对象)，都转化成可观测的。而且针对，数组或对象等的结构化的数据类型，这种转化是递归的，数组或对象的所有子节点都会被转化。
计算属性
计算属性是一个函数。这个函数不接收参数，只单纯的依赖的其他可观测状态。依赖的可观测状态发生变化，它的运行结果才会发生变化。
虽然和定义有一定出入，但是从输入输出保持一致这点来看，计算属性应该算是一种纯函数。
很多场景都能用到计算属性，比如字符串的连接，或者生成复杂结构的对象。因为计算属性自身也是可观测的，所以甚至可以使用它从可观测状态导出完整的用户界面。计算属性还可以在惰性和活跃两种状态之间切换。
反应
反应和计算属性有点类似，不同点在于，计算属性的函数是产生一个新的值，而反应是产生一个副作用。所谓副作用，就是指一些跟计算无关的动作，比如打印日志，网络请求，更新界面之类的。总之使用反应可以把数据变化和其他流程关联起来。
动作
动作是修改状态的主要方法。动作本身并不对状态更改做响应，而是修改可观测状态。（如用户触发的事件、web-socket传入消息、或直接对可观测状态的修改）
这四个核心概念对应mobx中最常用的4个api，observable、computed、reaction（autorun）、action。

React 单元测试
React+Redux单元测试一小时入门

要测试 ajax 请求，可以用 sinon 的 fake XMLHttpRequest, 不用为了测试改动 action 任何代码:

聊一聊前端自动化测试

Unit testing react component that makes ajax calls using JEST

How to implement testing + code coverage on React with Karma, Babel, and Webpack

Hello Redux 3/3 Unit Test

最近陸續用 Redux 做了一些 projects，想要把一些心得整理出來。
目前預計整理三篇：
Hello Redux: 關於 Redux 的一些基本介紹，包括我認知的 redux 的一些概念，和我覺得他設計得很棒的地方。
Server Rendering: 介紹如何使用 Redux 和 react-router 做 server rendering (ya! 寫好惹！)
Unit Test: 在測 Redux 的 code 的時候我遇到的問題和解決的方法，還有怎麼在測試的時候和 webpack loaders 和平共處。

這篇文章是這個系列的第三部份，Unit Test。

前端单元测试之Karma环境搭建

再看看Coverage，卧槽。。居然不是百分之百了。。。

原因很简单，webpack会加入一些代码，影响了代码的Coverage。如果我们引入了一些其它的库，比如jquery之类的，将源代码和库代码打包在一起后，覆盖率会更难看。。这样的Coverage就没有了参考的价值。

typescriptのunit test(webpack2, karma, jasmine, chai)
karma.conf.js

// Karma configuration
// Generated on Sat Jan 21 2017 10:54:02 GMT+0900 (JST)
const webpackConfig = require('./test.webpack.conf');

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '.',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'karma-typescript'],

    // list of files / patterns to load in the browser
    files: [
      'src/**/*.ts',
      'test/unit/index.spec.ts',
    ],

    // list of files to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/unit/index.spec.ts': ['webpack', 'sourcemap'],
      'src/**/*.ts': ['webpack', 'karma-typescript'],
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['mocha', 'karma-typescript'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,

    // phantomjs configuration
    phantomjsLauncher: {
      // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom) 
      exitOnResourceError: true
    },

    // webpack configuration
    webpack: webpackConfig,

    // webpack-dev-middleware configuration
    webpackMiddleware: {
      stats: 'errors-only'
    },

    coverageReporter: {
      reporters: [
        { type: 'text-summary' },
      ]
    },
  })
}