[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 经典四步时,从来没有想过其中的 ...
随机推荐
- div整体布局分析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 设为首页 收藏(IE可用)
function SetHome(obj, vrl) { try { obj.style.behavior = 'url(#default#homepage)'; obj.setHomePage(vr ...
- 关于在repeater中的checkbox实行多选和全选
今天项目中用到这一块,是一个b2b商城,业务是别人给客户留言后,客户从会员中心的留言管理中查看,用checkbox实行多选和全选后进行批量审核 首先在checkbox后加个hidden,作用见代码: ...
- .net 文件下载方法
public void DownLoadMethod(string FilePath) { string hzm = Path.GetExtension(FileP ...
- SQL 无法打开物理文件 XXX.mdf",操作系统错误 5:"5(拒绝访问。)"
用T-SQL命令附加数据库时,出现如下异常信息: 无法打开物理文件 XXX.mdf".操作系统错误 5:"5(拒绝访问.)". (Microsoft SQL Server ...
- [转]Windows中的句柄(handle)
1.句柄是什么? 在windows中,句柄是和对象一一对应的32位无符号整数值.对象可以映射到唯一的句柄,句柄也可以映射到唯一的对象.2.为什么我们需要句柄? 更准确地说,是windows需要 ...
- EIGRP认证 配置 (仅仅是命令 原理自己去看书) 转自:http://blog.163.com/s_u/blog/static/13308367201111771831631/
EIGRP认证 目的:掌握EIGRP的MD5认证 拓扑:这里IP配置我就不写出来了,应该对大家来说是非常简单的事了,就要细心一点就可以了.首先我们在R1上启用MD5认证R1(config)#key c ...
- javascript 正则匹配手机号码
<form class="form-horizontal" name="mobileform" style="padding:10px;&q ...
- 用Set中元素做条件查询
一个老师教许多学生,一个学生被许多老师教,一个学生有好多书,同一种书被许多同学拥有.查询教拥有书"a"的学生的老师: class teacher{ String id; ...
- 标签static
静态文本控件的功能比较简单,可作为显示字符串,图标,位图用.创建一个窗口可以使用成员函数: BOOL CStatic::Create( LPCTSTR lpszText, DWORD dwStyle, ...