[React Testing] Children with Shallow Rendering

weixin_30799995

于 2016-01-07 16:53:00 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/5110434.html

本文介绍如何使用ReactShallowRenderer确保React组件的渲染输出符合预期。通过具体实例展示了如何验证LikeCounter组件的渲染结果是否正确包含了指定的点赞数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

When testing React components, we often want to make sure the rendered output of the component matches what we expect. With the React Shallow Renderer, we can check the entire rendered output of a component, the children prop, or a subset of the children prop. We can also use 3rd party libraries to check that this element tree includes a specific piece. In this lesson we will walk through examples of each.

import React from 'react';
import expect from 'expect';
import expectJSX from 'expect-jsx';
expect.extend(expectJSX);
import TestUtils from 'react-addons-test-utils';
import LikeCounter from './likeCounter';


describe('like counter', ()=>{

    it('should render the like count correctly', ()=>{
        const renderer = TestUtils.createRenderer();
        renderer.render(<LikeCounter count={5} />);
        const actual = renderer.getRenderOutput();
        const expected = "Like: 5";
        expect(actual).toIncludeJSX(expected);
    });
});