一、用到的工具

1.React.addons.TestUtils

2.Jasmine

3.Browserify(处理jsx文件的require依赖关系)

4.Reactify(能和browserify很好的配合，把jsx转换为js)

5.编译命令为 browserify -t reactify test.jsx > app.js （参数t为transform）

二、测试代码：

1.test.jsx

  1.  var React = require("react/addons");
  2.  var TestUtils = React.addons.TestUtils;
  3.  var CheckboxWithLabel = require("./CheckboxWithLabel.jsx");
  4.  
  5.  describe("test CheckboxWithLabel component", function () {
  6.      it("check label text", function () {
  7.          var checkbox = TestUtils.renderIntoDocument(<CheckboxWithLabel text="你是否爱吃橘子" on="爱吃" off="不爱吃"></CheckboxWithLabel>);
  8.          var text = React.findDOMNode(checkbox).textContent;
  9.          expect(text).toContain("你是否爱吃橘子1");
  10.      })
  11.  })

2.CheckboxWithLabel.jsx

  1.  var React = require('react/addons');
  2.  var CheckboxWithLabel = React.createClass({
  3.      getInitialState: function () {
  4.          return {
  5.              checked: false
  6.          }
  7.      },
  8.      onChange: function() {
  9.          this.setState({
  10.              checked: !!this.state.checked
  11.          });
  12.      },
  13.      render: function() {
  14.          return (
  15.              <label>
  16.                  {this.props.text}
  17.                  <input type = "checkbox" checked={this.state.checked} onChange={this.onChange}/>
  18.                  {this.checked ? this.props.on : this.props.off}
  19.              </label>);
  20.      }
  21.  });
  22.  
  23.  module.exports = CheckboxWithLabel;

3.index.html

  1.  <!DOCTYPE html>
  2.  <html lang="zh-cn">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>测试</title>
  6.  </head>
  7.  <body>
  8.      <link rel="stylesheet" href="./node_modules/jasmine.css">
  9.      <script src="./node_modules/jasmine.js"></script>
  10.      <script src="./node_modules/jasmine-html.js"></script>
  11.      <script src="./node_modules/boot.js"></script>
  12.      <script src="./app.js"></script>
  13.  </body>
  14.  </html>

三、运行结果

1.

2.若修改测试代码为expect(text).toContain("你是否爱吃橘子1")，则如下：

用React.addons.TestUtils、Jasmine进行单元测试的更多相关文章

  1. Karma：1. 集成 Karma 和 Jasmine 进行单元测试

    关于 Karma 会是一个系列,讨论在各种环境下,使用 Karma 进行单元测试. 本文讨论 karma 集成 Jasmine 进行单元测试. 初始化 NPM 实现初始化 NPM 包管理,创建 pac ...

  2. Karma和Jasmine自动化单元测试

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  3. Karma和Jasmine 自动化单元测试环境搭建

    最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...

  4. Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

    1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...

  5. Angularjs 基于karma和jasmine的单元测试

    目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller     3.1 测试controller中变量值是否正确     3.2 模拟http请求返回值,测试$http服 ...

  6. 使用karma+jasmine做单元测试

    目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...

  7. React组件测试(模拟组件、函数和事件)

    一.模拟组件 1.用到的工具 (1)browerify (2)jasmine-react-helpers (3)rewireify(依赖注入) (4)命令:browserify - t reactif ...

  8. React Jest测试

    一. var jest = require('jest'); jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel ...

  9. React开发项目例子

    一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...

随机推荐

  1. 三种找回 linux root密码的方法

    找回 linux root密码的三种方法 第1种方法: 1.在系统进入单用户状态,直接用passwd root去更改2.用安装光盘引导系统,进行linux rescue状态,将原来/分区挂接上来,作法 ...

  2. 【转】如何在 Windows 中执行干净启动

    完成故障排除后,请执行以下步骤将计算机重置为正常启动. Windows 8.1 和 Windows 8 从屏幕右边缘滑入,然后点按“搜索”.您也可以将鼠标指向屏幕的右下角,然后单击“搜索”. 在搜索框 ...

  3. 解决ASP.NET使用IIS架设网站时“服务器应用程序不可用”的方法

    服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的“刷新”按钮重试您的请求. 管理员注意事项: 详述此特定请求失败原因的错误消息可在 Web ...

  4. 修改mysql的root密码

    use msyql; update user set password=password('新密码') where user='root'; flush privileges; quit net st ...

  5. JAVA equals, ==

    都是判相等,对于基本变量没区别,只是对动态变量(即对象)有区别: ==:引用相等(reference comparison).对于对象引用,即判断引用值也就是地址是否相等.即如果Object a,b, ...

  6. 团队博客作业Week1 Team Homework #3软件工程在北航

    这次我们采访了一位大四的学姐,让她简单地谈了谈去年学习软件工程的经历和感受. 在完成软件工程大作业的过程中,由于计划安排与实际脱节,导致时间前松后紧,平均每周花在这门课上的时间大约有8个小时. 项目完 ...

  7. Careercup - Facebook面试题 - 5671785349513216

    2014-05-02 01:05 题目链接 原题: bool anaStrStr (string needle, string haystack) { } Write a function that ...

  8. Android journey3 @点击事件的4种写法

    对于android布局中的控件,如Button等会有相应的点击事件去响应它所需要的功能,今天我们就以电话拨号器的代码说明下几种点击事件: package com.itheima.phone; impo ...

  9. 为什么使用long声明和double声明得到的结果不一样呢？

    为什么使用long声明和double声明得到的结果不一样呢? 程序如下: public class P376{ public static void main(String[] atgs){ long ...

  10. 【转载】OpenStack Swift学习笔记

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:崔炳华      原文地址:http://blog.csdn.net/i_ch ...