博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[React] Test friendly approach
阅读量:6824 次
发布时间:2019-06-26

本文共 1570 字,大约阅读时间需要 5 分钟。

Add functional function such as change state, this should have tests covered.

For example, in a component, there is a function call 'addBox':

onAddBox = () => {        const newBox = {            id    : this.state.boxes.length,            color : 'red'        };        const boxes = addBox(this.state.boxes, newBox);        this.setState({ boxes });    };

 

Here we use a function call 'addBox', this is written in a new file:

export const addBox = (boxes, newBox) => boxes.concat(newBox);

 

SO when need to use it, we need to import it to the component, not just write this function into component methods. Because if we make this function sprated from component methods, we are able to test it by just simply import this function to the test file.

import {addBox} from '../components/App/AppHelper';const boxes = [    {        id    : 0,        color : 'red'    },    {        id    : 1,        color : 'red'    }];const newBox = {    id: 2,    color: 'green'};test('Should be able to add new box', () => {   const expected = [       {           id    : 0,           color : 'red'       },       {           id    : 1,           color : 'red'       },       {           id: 2,           color: 'green'       }   ];   const result = addBox(boxes, newBox);   expect(result).toEqual(expected);});test('addBox should be immutable', () => {    const result = addBox(boxes, newBox);    expect(result).not.toBe(boxes);});

Here has two test, one is to test 'addBox' should actually add a new box to the existing array. Second test is to make sure we don't mutatue origianl data.

转载地址:http://vwrzl.baihongyu.com/

你可能感兴趣的文章
Golang学习笔记之WEB框架(gin)基本使用
查看>>
SAP人工智能服务Recast.AI的一个简单例子
查看>>
云栖科技评论90期:有两种“前沿科技”
查看>>
From 192.168.25.133 icmp_seq=238 Destination Host Unreachable 虚拟机ping主机不通
查看>>
上交所回应“科创板受理企业科技含量不高”:会在审核问询环节对企业进行多轮问询...
查看>>
教你如何用python操作数据库mysql ! !
查看>>
全栈必备 Log日志
查看>>
阿里云服务器企业该如何选择
查看>>
Nginx性能优化
查看>>
SQL与NoSQL数据库入门基础知识详解
查看>>
Redis命令——键(key)
查看>>
[Server] 服务器配置SSH登录邮件通知
查看>>
ceph 添加新硬盘删除旧的OSD
查看>>
Kubernetes 的安全机制 APIServer 认证、授权、准入控制
查看>>
杨老师课堂之Nginx学习之反向代理
查看>>
阿里云GPU云服务器
查看>>
自定义Dialog之旅程(二)理解Dialog大小
查看>>
最伟大的程序员高德纳: 谈计算机程序设计艺术
查看>>
利用Xamaria构建Android应用-公交发车信息屏
查看>>
Android自定义注解(一)
查看>>