React 测试驱动教程

by admin on 2018年12月17日

迎接移步我之博客阅读:《React
测试驱动教程》

除外参考 Google 官方的片段指出,Ribot 公司 Android
团队也享受了他们的代码风格指南和搭指南。

测试是开发周期中的一个最首要组成部分。没有测试的代码被称为:遗留代码。对于自而言,第一潮上
React 和 JavaScript 的时,感到十分有压力。如若您啊是刚起读书
JS/React,并在她们之社区,那么为或会合时有暴发同样的感到。想到的相会是:

BlockCanary — 轻松找有 Android App 界面卡顿元凶

  • 自家应当用啊一个构建工具?
  • 哪一个测试框架相比较好?
  • 本人应当学学啊种流格局?
  • 自急需为此到流动为?

BlockCanary 是自家以个人时间支出之 Android
平台及之一个轻量的,非侵入式的性质监控组件,应用只待简单地加以几进行,提供一些拖欠器件需要之上下文环境就足以当使以的时刻检测主线程上之各类卡顿问题,并因此组件提供的各种音信分析有因并开展修补。
出于该零件在阿里里开源,所以对外暂时不放起点码,这里针对公理及局部实现做描述。

为解决这一个烦恼,我控制写这篇小说。经过几独钟头之博客随笔读,查阅 JS
开发者的源码,还有参与 Florida 的
JSConf,终于让自家找到了自己之测试“槽”。开头为自身道没有经过测试的 React
程序代码是这样的未专业与紊乱。我缅想生在一个没有这种感觉的社会风气,但后来想,这是畸形的。

<br />

按照学科所有的代码都得以我的 github
仓库
中找到。

Android 开发绕不了的坑:你的 Bitmap 究竟占大半非凡内存?

给我们先河吧!

概括的话 density 的数值是 1dp=density px;densityDpi
是屏幕每英寸对应多少只点(不是像素点),在 DisplayMetrics
当中,这简单个之干是线性的……

设置 Webpack

遵照课程不是一个驱动什么下
webpack,所以自己无会师详细说,但最紧要之是如果打听大旨的物。
Webpack 就比如 Rails 中之 Assets Pipeline 一样。在基础层面达到而言,在运作
react 应用时,
汇合在拍卖你的代码和劳务之光景,只生成一个 bundle.js 在客户端。

坐其是一个特别有力的家伙,所以我们碰面平日由此到。在开,Webpack
的功效可能汇合吓到公,
而是我提出乃坚持不渝以下,一旦你打探了间的法则,就会晤觉得贯虱穿杨。而你然而待于她一个机遇去变现。

便大家不会合好那一个我们无会师之,或是害怕的。不过,一旦您打败起初不适并起首精晓它们,总会转移得够呛有趣。事实上,这多亏自己对测试的感触。当起平时高烧它,在熟习后好她
🙂

设谢兴趣,这里发生部分资源来再多地询问有关 webpack:

  1. Webpack
    Cookbook
    (使用的是
    Babel 5,但对于学 Webpack 的基本原理而言依旧杀有因而底)
  2. Webpack
    初学者可以看即篇稿子
  3. Pete Hunts 所写的 Webpack
    How-to

注意:假如要连随本教程实验,指出利用 Node 版本为
v5.1.0。当然版本 >4 的为是足以的。

首先,安装有有关 webpack 和 babel 的靠。Babel
是一个转译器,允许你当付出时行使 ES6(es2015)和 ES7
的特色,然后以那多少个代码转译成浏览器可分辨的 ES5 代码。

mkdir tdd_react
cd tdd_react
npm init        # follow along with normal npm init to set up project

npm i babel-loader babel-core webpack --save-dev

npm i 是 npm install 的别名。

通下,让我们设置项目标路径和创设一个 webpack.config.js 文件:

mkdir src                  # where all our source code will live
touch src/main.js          # this will be the entry point for our webpack bundling
mkdir test                 # place to store all our tests
mkdir dist                 # this is where the bundled javascript from webpack will go
touch webpack.config.js    # our webpack configuration file

伊始化的 webpack config 会很有些。阅读那个注释,领会下出了哟:

// our webpack.config.js file located in project root

var webpack = require('webpack');
var path = require('path');                // a useful node path helper library

var config = {
  entry: ['./src/main.js'],                // the entry point for our app
  output: {
    path: path.resolve(__dirname, 'dist'), // store the bundled output in dist/bundle.js
    filename: 'bundle.js'                  // specifying file name for our compiled assets
  },
  module: {
    loaders: [
      // telling webpack which loaders we want to use.  For now just run the
      // code through the babel-loader.  'babel' is an alias for babel-loader
      { test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }
    ]
  }
}

module.exports = config;

为让 babel 更好地工作,我们用定义哪个 presets
是咱要用的。让咱延续,并且安装 React 和 ES6 预处理所用的事物:

npm i babel-preset-react babel-preset-es2015 --save-dev

本我们发出部分挑。在 webpack config 文件被,会报您呀一样块是举行 bebel
预处理的:

loaders: [
  {
    test: /\.js$/,
    loaders: ['babel'],
    exclude: /node_modules/,
    query: {
      presets: ['react', 'es2015']
    }
  }
]

其余的主意是拿他们存在 .babelrc 文件被,那吗用当我之项目中。将 babel
预处理存储在 .babelrc 中,对于随后的开发者而言,更爱失去找到哪个 babel
预处理是可用之。此外,当大家将 Karma 设置到 webpack 之后,因为
.babelrc 文件的留存,大家尽管不再用外的先处理配置了。

# inside our project root
touch .babelrc

拿脚就段粘贴到事先处理公事中:

# .babelrc
{
  "presets": ["react", "es2015"]
}

为确认她是否工作,让大家于 main.js 中在一些 react
代码,并探有的承保是不是正规。接着安装 React 和 React DOM:

npm i react react-dom -S

使用 -S--save 的别名。

创第一独 React 组件:

# src/main.js
import React, { Component } from 'react';
import { render } from 'react-dom';

class Root extends Component {
  render() {
    return <h1> Hello World </h1>;
  }
}

render(<Root />, document.getElementById('root'));

聪明的读者就相会发现大家并没有于根部创造一个 index.html
文件。让我们累,当 bundle.js 编译后,将这内置 /dist 文件夹着:

# /dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

大深,让我们后续。最后,我们可运作
webpack,看看一切是否健康。假使你从未大局安装
webpack(npm i webpack -g),你呢得以据此 node modules 格局开展启动:

./node_modules/.bin/webpack

Webpack 将默认情状下搜寻一个配备名称为
webpack.config.js。假使你快,也可以透过不同 webpack config
作为参数传入。

于 package.json 中创设一个号,来就构建工作:

# package.json
... other stuff
"scripts": {
  "build": "webpack"
}

紧接下让 webpack-dev-server 提高开发体验:

npm i webpack-dev-server --save-dev

用 webpack dev server 的入口插手到 webpack.config.js 中:

... rest of config
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:3000',
    './src/main.js'
  ],
... rest of config

为 script 运行在出服务器上:

# package.json
... other stuff
scripts: {
  "dev": "webpack-dev-server --port 3000 --devtool eval --progress --colors --hot --content-base dist",
  "build": "webpack"
}

每当 script 中使用了 --content-base 标记,告诉 webpack 咱们想念服务为
/dist 文件夹。我们还定义了 3000 端口,使得再如是 Rails 开发的体验。

末段,在 webpack 配置文件被补充加一个 resolve
标记,使进口文件看起又直观。下边就是安排文件最终的榜样:

var webpack = require('webpack');
var path = require('path');

var config = {
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:3000',
    './src/main.js'
  ],
  resolve: {
    root: [
      // allows us to import modules as if /src was the root.
      // so I can do: import Comment from 'components/Comment'
      // instead of:  import Comment from '../components/Comment' or whatever relative path would be
      path.resolve(__dirname, './src')
    ],
    // allows you to require without the .js at end of filenames
    // import Component from 'component' vs. import Component from 'component.js'
    extensions: ['', '.js', '.json', '.jsx']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        // dont run node_modules or bower_components through babel loader
        exclude: /(node_modules|bower_components)/,
        // babel is alias for babel-loader
        // npm i babel-core babel-loader --save-dev
        loader: 'babel'
      }
    ],
  }
}

module.exports = config;

呢保险全部工作健康,让咱运行开发服务器,并且认同大家以屏幕及看看
“Hello World”。

npm run dev
open http://localhost:3000

君应有看到底凡如此的:

Hello World Image

<br />

设置 Mocha,Chai,Sinon 和 Enzyme

Mocha:将用于周转大家的测试。
Chai:是大家想的库房。应用万分广阔,允许接纳 RSpec 一样的语法。
Sinon:将服务被 mocks/stubs/spies.
Enzyme:将用以测试大家的 React components。AirBnB
写的一个很出色的测试库。

设置这个保险:

npm i mocha chai sinon --save-dev

若果大家希望能利用 ES6
编写测试,那么大家要在运转前对代码举行转译。那么大家得设置
babel-register:

npm i babel-register --save-dev

加一些 npm scripts 到 package.json 中,让测试再度简便:

# ./package.json
... rest of package.json
  "scripts": {
    "test": "mocha --compilers js:babel-register --recursive",
    "test:watch": "npm test -- --watch",
    "build": "webpack",
    "dev": "webpack-dev-server --port 3000 --devtool eval --progress --colors --hot --content-base dist",
  },

我们的测试脚论要运行 mocha,并下 babel-register
举办转译,然后递归地翻 /test 目录。

最终,大家需要设置 Karma,由此 npm script
会转移得不算,但假设非装,它以会正常工作。npm run test:watch
将会晤监视程序,并于文书来修改时重运行。多么高效!

肯定它能够工作,创造一个 hello world 测试 /tests/helloWorld.spec.js

# /test/helloWorld.spec.js
import { expect } from 'chai';

describe('hello world', () => {
  it('works!', () => {
    expect(true).to.be.true;
  });
});

哇…看起挺像 RSpec!

使各级一个测试都如引入 expect,这将更换得不可开交麻烦,由此被咱新建一个
test_helper 文件来保存这么些东西:

# /test/test_helper.js
import { expect } from 'chai';
import sinon from 'sinon';

global.expect = expect;
global.sinon = sinon;

接下来将它们概括到 npm 脚本的周转套件中,并经过
--require ./test/test_helper.js 来声明:

# package.json script section
  "test": "mocha --compilers js:babel-register --require ./test/test_helper.js --recursive",

自身吧上加了
sinon,由此它们也得全局可用。现在无什么日期,咱们于描绘一个初的测试时,都无欲手动引入
expectsinon

Android Proguard 指南

Enzyme

今昔我们所用的“普通”测试工具都已设置好了(mocha,chai,sinon),接着给我们装
Enzyme,并且开首测试 React component!

设置是包:

npm i enzyme react-addons-test-utils --save-dev

Enzyme
的重要文档可以当此处找到。如果暴发时空,我推荐阅读
Shallow Rendering 部分。

你会问,什么是 Shallow Rendering?

针对我们的话是一律种组件调用 render 方法,得到我们好预言的 React
元素,而不论需实际安装组件到 DOM 上。更多的 React
元素请看这

Enzyme 会将 shallow rendered 组件封装上一个特殊之 wrapper
中,进而让大家可以测试。要是你用过 Rails,这看起像是 Capybara 中之
page 对象。

给我们也一些老少咸宜的 <Root /> 组件举行 TDD 的让开发。

这 Root 组件会是一个 container,意味着在行使被她可操纵 state
的处理。学习 React
中“智能”和“笨拙”组件之间的反差,对于应用程序体系布局是蛮首要的。即刻首作品很好地诠释了它们

# /tests/containers/Root.spec.js

import React from 'react';                     // required to get test to work.  we can get around this later with more configuration
import { shallow } from 'enzyme';              // method from enzyme which allows us to do shallow render
import Root from '../../src/containers/Root';  // import our soon to be component

describe('(Container) Root', () => {
  it('renders as a <div>', () => {
    const wrapper = shallow(<Root />);
    expect(wrapper.type()).to.eql('div');
  });

  it('has style with height 100%', () => {
    const wrapper = shallow(<Root />);
    const expectedStyles = {
      height: '100%',
      background: '#333'
    }
    expect(wrapper.prop('style')).to.eql(expectedStyles);
  });

  it('contains a header explaining the app', () => {
    const wrapper = shallow(<Root />);
    expect(wrapper.find('.welcome-header')).to.have.length(1);
  });
});

要是我们之所以 npm test
运行测试,这会砸。因为大家一贯不在适合的岗位创建一个清组件。由此大家可如此做:

假设以其他时候你想看看这段代码的源代码,能够当 github
仓库

中找到

# /src/containers/Root.js
import React, { Component } from 'react';

const styles = {
  height: '100%',
  background: '#333'
}

class Root extends Component {
  render() {
    return (
      <div style={styles}>
        <h1 className='welcome-header'>Welcome to testing React!</h1>
      </div>
    )
  }
}

export default Root;

再也运行测试就可以了。

以大家的测试中出众多重新的事物,因此我们还需要重临做片重构。由于大家无叫
Root 传入任何的 props,那么我们得以 shallow render
它一样不成,然后便以一个 wrapper
中得了了我们有的断言。很多时让得一个一定的 props
后,我发现自己包装的一对测试会在 “sub” describe
块中,然后为一样堆断言也时有暴发那个 props。假使你用了 RSpec,就象是于使用
“context” 块。

describe('(Container) Root', () => {
  const wrapper = shallow(<Root />);

  it('renders as a <div>', () => {
    expect(wrapper.type()).to.eql('div');
  });

  it('has style with height 100%', () => {
    const expectedStyles = {
      height: '100%',
      background: '#333'
    }
    expect(wrapper.prop('style')).to.eql(expectedStyles);
  });

  it('contains a header explaining the app', () => {
    expect(wrapper.find('.welcome-header')).to.have.length(1);
  });
});

尽心尽力地在公的测试着以 shallow,但有时候也说不定毫无。例如,假如你要测试
React 生命周期的法羊时,就需真正地拿零件安装出来。

连下去为大家测试一个零部件的装置及调用函数,当其装时,大家得获取有露于
sinon 上之消息与着利用的 spies。

咱得以假装 Root 组件有一个子组码叫
CommentList,在装置后以调用任意的回调。当通过给定 props
组件安装时,函数被调用,因而我们虽可测试者情况。在组件渲染时被评论列表一些
style,然后大家虽然足以领悟 shallow render
是哪些处理这多少个样式的了。CommentList 会在一个组件文件夹的
/src/components/CommentList.js 中。因为它们不处理数量,因而完全在
props,换句话说它是一个笨拙)组件:

import React from 'react';

// Once we set up Karma to run our tests through webpack
// we will no longer need to have these long relative paths
import CommentList from '../../src/components/CommentList';
import {
  describeWithDOM,
  mount,
  shallow,
  spyLifecycle
} from 'enzyme';

describe('(Component) CommentList', () => {

  // using special describeWithDOM helper that enzyme
  // provides so if other devs on my team don't have JSDom set up
  // properly or are using old version of node it won't bork their test suite
  //
  // All of our tests that depend on mounting should go inside one of these
  // special describe blocks
  describeWithDOM('Lifecycle methods', () => {
    it('calls componentDidMount', () => {
      spyLifecyle(CommentList);

      const props = {
        onMount: () => {},  // an anonymous function in ES6 arrow syntax
        isActive: false
      }

      // using destructuring to pass props down
      // easily and then mounting the component
      mount(<CommentList {...props} />);

      // CommentList's componentDidMount should have been
      // called once.  spyLifecyle attaches sinon spys so we can
      // make this assertion
      expect(
        CommentList.prototype.componentDidMount.calledOnce
      ).to.be.true;
    });

    it('calls onMount prop once it mounts', () => {
      // create a spy for the onMount function
      const props = { onMount: sinon.spy() };

      // mount our component
      mount(<CommentList {...props} />);

      // expect that onMount was called
      expect(props.onMount.calledOnce).to.be.true;
    });
  });
});

再有许多,阅读这个注释可以扶持而更好地精晓。看看这一个实践,让测试可因而,然后再一次回头望那多少个测试,验证下而所知晓的事物。

# /src/components/CommentList.js
import React, { Component, PropTypes } from 'react';

const propTypes = {
  onMount: PropTypes.func.isRequired,
  isActive: PropTypes.bool
};

class CommentList extends Component {
  componentDidMount() {
    this.props.onMount();
  }

  render() {
    return (
      <ul>
        <li> Comment One </li>
      </ul>
    )
  }
}

CommentList.propTypes = propTypes;
export default CommentList;

运行 npm test ,现在那么些套件应该可以透过测试了。

联网下去让咱抬高一些 shallow rendered 测试,当让得一个 isActive
props 时,来管我们的零件使用了适度的 CSS class。

... previous tests

  it('should render as a <ul>', () => {
    const props = { onMount: () => {} };
    const wrapper = shallow(<CommentList  {...props} />);
    expect(wrapper.type()).to.eql('ul');
  });

  describe('when active...', () => {
    const wrapper = shallow(
      // just passing isActive is an alias for true
      <CommentList onMount={() => {}} isActive />
    )
    it('should render with className active-list', () => {
      expect(wrapper.prop('className')).to.eql('active-list');
    });
  });

  describe('when inactive...', () => {
    const wrapper = shallow(
      <CommentList onMount={() => {}} isActive={false} />
    )
    it('should render with className inactive-list', () => {
      expect(wrapper.prop('className')).to.eql('inactive-list');
    });
  });
});

于它们经测试:

class CommentList extends Component {
  componentDidMount() {
    this.props.onMount();
  }

  render() {
    const { isActive } = this.props;
    const className = isActive ? 'active-list' : 'inactive-list';

    return (
      <ul className={className}>
        <li> Comment One </li>
      </ul>
    )
  }
}

这儿公应有对什么样测试 react 组件都暴发了一个要命好之知了。记得去阅读
Enzyme 文档来赢得重新多之灵感。

ProGuard
工具得以经过删除不采纳的代码和重命名类、字段和艺术及语义模糊的讳来
减弱、优化以及混淆代码,生成更小型号的 .apk
文件,使旁人倒往逆推工程更劳顿。

设置 Karma

设置 Karma
可能会师有点忙绿。坦白说,这对准我而言也是平码痛苦之行事。日常,当自己开
React 应用时,我会拔取采用都构建好的 starter
kit,方便方便。自我很推荐开发时用之 starter
kit

运用 Karma 的值在急速测试重载,可以基本上浏览器测试和太关键之是 webpack
预处理。一旦大家以 Karma 设置好了,在我们运行测试程序时,不仅是光来
babel-loader,而是一切 webpack
config。这也咱提供了广大便于,使得我们的测试环境与开支环境一致。

为我们起始吧…

npm i karma karma-chai karma-mocha karma-webpack --save-dev
npm i karma-sourcemap-loader karma-phantomjs-launcher --save-dev
npm i karma-spec-reporter --save-dev
npm i phantomjs --save-dev

# The polyfills arn't required but will help with browser support issues
# and are easy enough to include in our karma config that I figured why not
npm i babel-polyfill phantomjs-polyfill --save-dev

很多保,我掌握。相信我完成这是非凡值得的。

对于大家的示范而言,大家用选取
PhantomJS。没有其余什么由,这本身于
starter kit 中就以了。可以按照好的嗜好应用 Chrome,Firefox 或是
Safari,甚至以 PhantomJS 之上。(这是因而 Karma 的一样宗很非凡的行)

当安排 karma 此前先安装 yargs,它会为你用命令执行参数来定制 Karma
的配备。

npm i yargs -S

兹大家可由此创制一个 Karma config
文件去监视我们的公文,当文件发出修改时再运行并迅速地保留。

Karma Config

touch karma.config.js

// ./karma.config.js

var argv = require('yargs').argv;
var path = require('path');

module.exports = function(config) {
  config.set({
    // only use PhantomJS for our 'test' browser
    browsers: ['PhantomJS'],

    // just run once by default unless --watch flag is passed
    singleRun: !argv.watch,

    // which karma frameworks do we want integrated
    frameworks: ['mocha', 'chai'],

    // displays tests in a nice readable format
    reporters: ['spec'],

    // include some polyfills for babel and phantomjs
    files: [
      'node_modules/babel-polyfill/dist/polyfill.js',
      './node_modules/phantomjs-polyfill/bind-polyfill.js',
      './test/**/*.js' // specify files to watch for tests
    ],
    preprocessors: {
      // these files we want to be precompiled with webpack
      // also run tests throug sourcemap for easier debugging
      ['./test/**/*.js']: ['webpack', 'sourcemap']
    },
    // A lot of people will reuse the same webpack config that they use
    // in development for karma but remove any production plugins like UglifyJS etc.
    // I chose to just re-write the config so readers can see what it needs to have
    webpack: {
       devtool: 'inline-source-map',
       resolve: {
        // allow us to import components in tests like:
        // import Example from 'components/Example';
        root: path.resolve(__dirname, './src'),

        // allow us to avoid including extension name
        extensions: ['', '.js', '.jsx'],

        // required for enzyme to work properly
        alias: {
          'sinon': 'sinon/pkg/sinon'
        }
      },
      module: {
        // don't run babel-loader through the sinon module
        noParse: [
          /node_modules\/sinon\//
        ],
        // run babel loader for our tests
        loaders: [
          { test: /\.js?$/, exclude: /node_modules/, loader: 'babel' },
        ],
      },
      // required for enzyme to work properly
      externals: {
        'jsdom': 'window',
        'cheerio': 'window',
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': 'window'
      },
    },
    webpackMiddleware: {
      noInfo: true
    },
    // tell karma all the plugins we're going to be using to prevent warnings
    plugins: [
      'karma-mocha',
      'karma-chai',
      'karma-webpack',
      'karma-phantomjs-launcher',
      'karma-spec-reporter',
      'karma-sourcemap-loader'
    ]
  });
};

读有的诠释一坏或少数差推向精晓是 config 是做什么的。使用 Webpack
的平死便宜是全体都是普通的 JavaScript
代码,并且我们得以“重构”配置文件。事实上,这正是绝大多数 starter kit
所做的!

乘势 Karma 设置好,为运行测试,最终一项事即是即使失去革新我们的
package.json:

# package.json
  "scripts" {
    "test": "node_modules/.bin/karma start karma.config.js",
    "test:dev": "npm run test -- --watch",
    "old_test": "mocha --compilers js:babel-register --require ./test/test_helper.js --recursive",
    "old_test:watch": "npm test -- --watch"
  }

自身提出重命名旧的测试 scripts 的前缀,用 ‘old_’ 表示。

最终的 package.json 是这样的:

{
  "name": "react-testing-starter-kit",
  "version": "0.1.0",
  "description": "React starter kit with nice testing environment set up.",
  "main": "src/main.js",
  "directories": {
    "test": "tests",
    "src": "src",
    "dist": "dist"
  },
  "dependencies": {
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "yargs": "^3.31.0"
  },
  "devDependencies": {
    "babel-core": "^6.4.0",
    "babel-loader": "^6.2.1",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-register": "^6.3.13",
    "chai": "^3.4.1",
    "enzyme": "^1.2.0",
    "json-loader": "^0.5.4",
    "karma": "^0.13.19",
    "karma-chai": "^0.1.0",
    "karma-mocha": "^0.2.1",
    "karma-phantomjs-launcher": "^0.2.3",
    "karma-sourcemap-loader": "^0.3.6",
    "karma-spec-reporter": "0.0.23",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.3.4",
    "phantomjs": "^1.9.19",
    "phantomjs-polyfill": "0.0.1",
    "react-addons-test-utils": "^0.14.6",
    "sinon": "^1.17.2",
    "webpack": "^1.12.11",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "test": "node_modules/.bin/karma start karma.config.js",
    "test:dev": "npm run test -- --watch",
    "build": "webpack",
    "dev": "webpack-dev-server --port 3000 --devtool eval --progress --colors --hot --content-base dist",
    "old_test": "mocha --compilers js:babel-register --require ./test/test_helper.js --recursive",
    "old_test:watch": "npm test -- --watch"
  },
  "repository": {
    "type": "git",
    "url": "tbd"
  },
  "author": "Spencer Dixon",
  "license": "ISC"
}

以测试套件中外加 webpack
预处理,我们明日得以去除这个以测试外烦人的相对路径讲明:

// test/containers/Root.spec.js
import React from 'react';
import { shallow } from 'enzyme';
import Root from 'containers/Root';               // new import statement
// import Root from '../../src/containers/Root';  // old import statement

// test/components/CommentList.spec.js
import React from 'react';
import CommentList from 'components/CommentList';               // new import statement
// import CommentList from '../../src/components/CommentList';  // old import statement

import {
  describeWithDOM,
  mount,
  shallow,
  spyLifecycle
} from 'enzyme';

前些天以是 starter kit 开发,你得输入以下这多少个命令去运转程序:

npm run dev         # note the addition of run
npm run test:dev    # note the addition of run

假设还有呀不知底的地点,能够以 github
上查看该源码

<br />

结论

咱曾经创造了一个结实的测试环境,可以因你的路具体需求去改变跟进化。在生一样蹩脚的稿子中,我将消费又多的时光在特现象的测试,还有怎样测试
Redux,我更爱 flux 的贯彻。

尽管自己就使用 React
开发了多次月份,但自身早就好上它了。我梦想以课程可以协助你还透彻地亮有
React 测试的顶级实践。有任何问题依然臧否随时联系自己。测试是咱的好对象!

初稿链接

怎办好互联网商家之技艺企业CEO?

互联网企业的技能团队负责人应当具备什么的能力?怎么才可以搞活?这是自个儿以果壳网上之答疑,整理成文,抛砖引玉,欢迎我们吐槽。

<br />

Ribot 的 Android 代码风格指南和搭指南

除此之外参考 Google 官方的片段指出,Ribot 公司 Android
团队也享受了她们之代码风格指南和搭指南,除了命名规范,还有阐明,使用第三方库和测试指南,最后还分享了他们采纳MVP 架构的体验。

<br />

拥抱 Android Studio 之一:从 ADT 到 Android Studio

长年累月面前央视发出平等仿电视机连串片:大国崛起,重要描述这一个曾以站在世界舞台核心的国的兴亡历程。纵观历史,正是改进驱动一个国家能够崛起。

<br />

觉得前日底日报很称赞? 点击分享按钮,发给你沿发呆的同事吧。

情侣围太杂,新浪太乱;身处互联网领域的汝,是无是不时感慨找不顶看技术著作的地点?稀土团队近日开销了同等暂缓被「掘金」的使用,给屏幕面前很热衷让行的互联网技术并且不甘心的您,和我们的
Co-editor
一起来打互联网最上的互联网技术干货吧!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图