zoukankan      html  css  js  c++  java
  • [React Testing] Conditional className with Shallow Rendering

    Often our components have output that shows differently depending on the props it is given; in this lesson, we go over how to compare the className prop element tree output based on conditional input.

    // LikeCounter.js
    
    import React from 'react';
    import classnames from 'classnames';
    
    const LikeCounter = ({count, isActive}) => {
        return <a
            className={
                classnames({
                    'LikeCounter--active': isActive
                })
            }
            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);
        });
    });
    
    describe('active class', ()=>{
        it('should have active class based on isActive props: true', ()=>{
    
            const renderer = TestUtils.createRenderer();
            renderer.render(<LikeCounter count={5} isActive={true}/>);
            const actual = renderer.getRenderOutput().props.className.includes('LikeCounter--active');
            const expected = true;
            expect(actual).toEqual(expected);
        });
    
        it('should have active class based on isActive props: false', ()=>{
    
            const renderer = TestUtils.createRenderer();
            renderer.render(<LikeCounter count={5} isActive={false}/>);
            const actual = renderer.getRenderOutput().props.className.includes('LikeCounter--active');
            const expected = false;
            expect(actual).toEqual(expected);
        });
    });
  • 相关阅读:
    HTTP协议--详解
    汇编语言前五章总结
    [转] vscode C/C++ 插件预定义环境变量(linux)
    C++小细节
    CC++ 如何确定一个变量的类型(恶心的指针)
    Ubuntu下安装tensorflow
    github 上不去
    应用层01-HTTP
    C++ 传递数组引用
    C++ 命令行窗口打印二叉树(图形)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5108013.html
Copyright © 2011-2022 走看看