When you render a component with the Shallow Renderer, you have access to the underlying object. We can write lots of useful tests to check that our components are working as expected. In this lesson, we will use the type property on the shallow rendered component to make sure that the root element is what we expect it to be.

LikeCounter.js

import React from 'react';

const LikeCounter = ({count}) => {
return <a href="#">Like: {count}</a>
} export default LikeCounter;

LikeCounter.spec.js:

import React from 'react';
import expect from 'expect';
import expectJSX from 'expect-jsx';
import TestUtils from 'react-addons-test-utils';
import LikeCounter from './likeCounter'; describe('LikeCOunter', ()=>{ it('should be a link', ()=>{
const renderer = TestUtils.createRenderer();
renderer.render(<LikeCounter count={5} />);
const actual = renderer.getRenderOutput().type;
const expected = 'a';
expect(actual).toEqual(expected);
});
});

  

[React Testing] Element types with Shallow Rendering的更多相关文章

  1. [React Testing] Conditional className with Shallow Rendering

    Often our components have output that shows differently depending on the props it is given; in this ...

  2. [React Testing] Intro to Shallow Rendering

    In this lesson, we walk through how to use one of React's Test Utilities (from thereact-addons-test- ...

  3. [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, sinc ...

  4. React的Element的创建和render

    React的Element是React应用程序的最小构建块,它是用来描述我们在屏幕上看到的浏览器页面上的内容. 在React中构建 Element 有两种方式: 1.JSX的方式,JSX不是React ...

  5. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

  6. Kettle Unable to get list of element types for namespace 'pentaho'

    我把公司的kettle5.0升级到7.0之后遇到了这个问题,困扰了很久,百度谷歌都查不到结果,所以只能自己查找原因. 由于已经被搞好了,现在无法截图了,总之就是下面这行报错,遇到这个错误的同学估计也不 ...

  7. React Testing All in One

    React Testing All in One React 测试 https://reactjs.org/docs/testing.html jest 26.4 https://jestjs.io/ ...

  8. [React Testing] Children with Shallow Rendering

    When testing React components, we often want to make sure the rendered output of the component match ...

  9. [React Testing] className with Shallow Rendering

    The React Shallow Renderer test utility lets us inspect the output of a component one level deep. In ...

随机推荐

  1. 关于在repeater中的checkbox实行多选和全选

    今天项目中用到这一块,是一个b2b商城,业务是别人给客户留言后,客户从会员中心的留言管理中查看,用checkbox实行多选和全选后进行批量审核 首先在checkbox后加个hidden,作用见代码: ...

  2. iOS8中添加的extensions总结(二)——分享扩展

    分享扩展 注:此教程来源于http://www.raywenderlich.com的<iOS8 by Tutorials> 1.准备 这次例子来源于国外的图片分享网站Imgur.com 首 ...

  3. 正则-匹配获取url参数

    1.根据指定参数名获取参数值 A页面向连接到B页面的url为: http://www.189dg.com/ajax/sms_query.ashx?action=smsdetail&sid=22 ...

  4. php cgi 与 cli 区别

    以CGI方式运行时,web server将用户请求以消息的方式转交给PHP独立进程,PHP与web服务之间无从属关系:CLI则是命令行接口,用于在操作系统命令行模式下执行PHP,比如可以直接在win的 ...

  5. Golang http包下FileServer的使用

    FileServer文档:https://godoc.org/net/http#FileServer 今天看到http的 Handle 方法,所以就像试试,就找到FileServer FileServ ...

  6. Android自定义View 构造方法 遇到的一些问题

    Android开发中,经常会自定义View,那么就会使用构造方法,比如自定义MyView,继承View,会要求实现构造方法: public MyView(Context context) { supe ...

  7. akka简单示例-2

    手动敲了一遍计算pi的示例:http://www.gtan.com/akka_doc/intro/getting-started-first-scala.html 有个笔误,花了半个小时定位. [To ...

  8. .net performance

    http://msdn.microsoft.com/en-us/library/ms173196.aspx http://www.zhihu.com/question/20314377 http:// ...

  9. Android开发程序获取GPS信息步骤

    1.获取LOCATION_SERVICE系统服务.2.创建Criteria对象,调用该对象的set方法设置查询条件.3.调用LocationManager.getBestProvider(Criter ...

  10. C语言#pragma预处理

    在所有的预处理指令中,#pragma 指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma 指令对每个编译器给出了一个方法,在保持与C 和C ++语言完全 ...