[React Testing] JSX error diffs -- expect-jsx library
2016-01-05 01:54
483 查看
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:
expect(ReactComponent|JSX).toEqualJSX(ReactComponent|JSX)
expect(ReactComponent|JSX).toNotEqualJSX(ReactComponent|JSX)
expect(ReactComponent|JSX).toIncludeJSX(ReactComponent|JSX)
expect(ReactComponent|JSX).toNotIncludeJSX(ReactComponent|JSX)
NOTE: This lesson uses the
expect-jsxpackage, 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] Intro to Shallow Rendering
- react native之helloworld
- ReactJS入门教程
- windows下搭建react native开发环境
- React-Native之ViewPagerAndroid的使用
- JS/React 判断对象是否为空对象
- 初识React
- 【React Native开发】React Native For Android环境配置以及第一个实例(1)
- React入门 (一) 基本语法和功能介绍
- React Native开发的仿美团小demo
- React入门 (二) 创建一个评论模块
- React入门(四) 评论模块续-评论表单
- [转]ReactJS入门教程
- [深入ReactNative]第一篇 通讯及消息循环代码剖析
- 使用Jest对React-Native做单元测试
- [React Testing] Setting up dependencies && Running tests
- Angular与React的一些看法
- 在Windows下搭建React Native Android开发环境
- React 根据官方总结的规范
- Codeforces 607A Chain Reaction 【二分 + dp】