[React Testing] JSX error diffs -- expect-jsx library
When writing React component tests, it can be hard to decipher the error diffs of broken tests, since they are just the final objects that React uses under the hood. There are some nice libraries that let you extend your assertion library to show JSX diffs; in this lesson we will wire up one of these libraries to show how to debug JSX error diffs from your React tests. We will also show how narrowing down what you are testing helps to make the test error diffs easier to deal with.
NOTE: This lesson uses the expect-jsx
package, but there are other options available for both expect and other assertion libraries.
import React from 'react';
import expect from 'expect';
import TestUtils from 'react-addons-test-utils';
import expectJSX from 'expect-jsx';
expect.extend(expectJSX); const CoolComponent = ({greeting}) => {
return (
<div>
<h1>Greeting</h1>
<div>{greeting}</div>
</div>
);
}; describe('CoolComponent', ()=>{ it('should render the actual component', ()=>{
//Shallow Rendering
const renderer = TestUtils.createRenderer();
renderer.render(<CoolComponent greeting='hello world' />);
const actual = renderer.getRenderOutput();
const expected = <div>hello world</div>;
expect(actual).toIncludeJSX(expected);
});
});
---------------
expect-jsx:
- expect(ReactComponent|JSX).toEqualJSX(ReactComponent|JSX)
- expect(ReactComponent|JSX).toNotEqualJSX(ReactComponent|JSX)
- expect(ReactComponent|JSX).toIncludeJSX(ReactComponent|JSX)
- expect(ReactComponent|JSX).toNotIncludeJSX(ReactComponent|JSX)
[React Testing] JSX error diffs -- expect-jsx library的更多相关文章
- 如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...
- React学习笔记-2-什么是jsx?如何使用jsx?
什么是jsx? JSX是JavaScript XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...
- React文档翻译系列(三)JSX简介
# React文档翻译系列(三)JSX简介 先来看一下下面的变量声明: ``` const element = Hello world! ``` 这种有趣的标签语法既不是字符串也不是HTML. 这种形 ...
- react实战项目开发(2) react几个重要概念以及JSX语法
前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...
- 关于 ReactNative 环境搭建之 error: invalid developer directory '/Library/Developer/CommandLineTools' - RN
简要说明,此次尝试安装 ReactNative 时当前 MacPro 版本为 10.13.6.Xcode 版本为 Version 9.4.1 (9F2000),按照官方的完整原生环境搭建流程一步步执行 ...
- 安装MySQL,在./configure时出现错误:error: No curses/termcap library found的解决办法
是./configure出了问题,于是回头查看,果然发现问题: 最后几行出了错.完整错误信息如下: checking for tgetent in -lncurses... no checking f ...
- error: could not find library containing RSA_new
error: could not find library containing RSA_new yum -y install openssl-devel apt-get install libssl ...
- cocos2d-x, protobuf, no config.h, #error "No suitable threading library available."
在用cocos2d-x3.2 + protobuf编译Android项目的时候,protobuf出现了两个问题: 1. 首先是config.h找不到,查阅自后说是通过命令或工具生成的,里面的内容根据不 ...
- error: No curses/termcap library found的解决办法
mysql版本:5.1.30 已经不记得这次是第几次安装mysql了,遇到这个问题倒是第一次. 之前在tar,./configure,make,make install 经典四步时,从来没有想过其中的 ...
随机推荐
- js 定义函数的几种方法 以及如何调用
/*1.方法调用模式: 先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来执行方法,this即指当前的myobject 对象.*/ var car = { carId ...
- pl/sql的工具导入和代码导入
工具导入:在导入的文件中添加导入工具.导入imp:F:\app\Administrator\product\11.1.0\db_1\BIN\imp.exe导出exp:F:\app\Administra ...
- Ubuntu11.10与r8168网卡不兼容导致网络时断时续的问题
安装了ubuntu11.10之后,感觉上网啥的很不稳定,ssh连接内网机器也是一条命令卡半天,检查了各方面的原因,网络没有什么问题,最后才发现是网卡驱动的问题,网上搜了一下是由于linux(ubunt ...
- Hbase常用操作
下面我们看看HBase Shell的一些基本操作命令,我列出了几个常用的HBase Shell命令,如 名称 命令表达式 创建表 create '表名称', '列名称1','列名称2','列名称N' ...
- FTP链接mac
mac下一般用smb服务来进行远程文件访问,但要用FTP的话,高版本的mac os默认关掉了,可以用如下命令打开: sudo -s launchctl load -w /System/Library/ ...
- epoll模型的et模式和lt模式
http://www.cppblog.com/peakflys/archive/2012/08/26/188344.html 评论区讨论,唐诗! http://www.cnblogs.com/e ...
- 使用2to3转换python代码
如果要把python2编译器下的代码转换升级到python3编译器,可以使用python自带的 2to3工具进行转化: windows下转化: doc 命令窗口: >> python C ...
- 让一个Activity在开机后自动显示
Activity本身不会在手机开机后自动运行的.但想让手机开机后就立刻做一些动作,需要使用广播接收器拦截手机开启广播,并在onReceive方法中完成相应的动作,如打开一个Activity. 广播接收 ...
- Razor视图引擎
在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASPX引擎或者第三方的NVelocity模板引擎. (1)Razor文件类型: ...
- 文成小盆友python-num17 - django基础
一.首先了解web应用的本质 对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 下面利用socket实现一个简单的web框架: #!/usr/b ...