22、React组件测试入门指南

React组件测试入门指南

1. 测试无状态函数组件

1.1 组件分析

我们首先从测试一个相对简单的组件开始，即 Content 组件。这个组件的功能很简单，仅负责渲染一个包含特定内容的段落。以下是该组件的代码：

import React, { PropTypes } from 'react';
const Content = (props) => {         
  const { post } = props;
  return (
    <p className="content">      
      {post.content}        
    </p>
  );
};
Content.propTypes = {
  post: PropTypes.object,
};
export default Content;

在编写测试时，我们需要考虑一些想要验证的假设。对于 Content 组件，我们主要关注两点：一是组件需要渲染通过属性传递进来的内容；二是需要为段落元素分配一个类名。

1.2 测试准备

编写测试时，我们不会去验证一些基础的假设，如“React正常工作”“函数可以执行”“JSX转译器正常工作”等。这些是其他项目需要负责测试和确保的内容，我们应选择可靠、经过充分测试且保持更新的软件。

1.3 测试文件约定

测试文件通常以 .test.js </