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);
        });
    });
  • 相关阅读:
    Python 多核 多线程 调度
    mysql-select for update
    Python logging模块
    TCP/IP和HTTP协议与Socket的区别联系
    DNS+CDN
    wget命令
    Cannot find module 'webpack-cli/bin/config-yargs
    TS7015: Element implicitly has an 'any' type because index expression is not of type 'number'
    js 创建私有变量
    报错集锦及解决方案
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5108013.html
Copyright © 2011-2022 走看看