zoukankan      html  css  js  c++  java
  • [React & Testing] Snapshot testings

    For example we have a React comonent: -- A toggle button, we want to test. When it si toggle on, the color is a little bit darken than it's not.

    // see this live: https://codesandbox.io/s/GvWpGjKQ
    import React, {Component} from 'react'
    import PropTypes from 'prop-types'
    import glamorous from 'glamorous'
    import {darken} from 'polished'
    
    // imagine this is in a "components" file
    const primaryColor = '#337ab7'
    const toggledOnStyles = {
      backgroundColor: darken(0.15, primaryColor),
      borderColor: darken(0.25, primaryColor),
      '&:hover,&:active,&:focus': {
        backgroundColor: darken(0.2, primaryColor),
        borderColor: darken(0.3, primaryColor),
      },
    }
    const toggledOffStyles = {
      backgroundColor: primaryColor,
      borderColor: darken(0.1, primaryColor),
      '&:hover,&:active,&:focus': {
        backgroundColor: darken(0.1, primaryColor),
        borderColor: darken(0.2, primaryColor),
      },
    }
    const ToggleButton = glamorous.button(
      {
        display: 'inline-block',
        padding: '6px 12px',
        marginBottom: '0',
        fontSize: '14px',
        fontWeight: '400',
        lineHeight: '1.4',
        textAlign: 'center',
        cursor: 'pointer',
        borderRadius: '4px',
        color: '#fff',
      },
      props => (props.on ? toggledOnStyles : toggledOffStyles),
    )
    
    class Toggle extends Component {
      constructor(props, ...rest) {
        super(props, ...rest)
        this.state = {
          toggledOn: props.initialToggledOn || false,
        }
      }
    
      handleToggleClick = () => {
        const toggledOn = !this.state.toggledOn
        this.props.onToggle(toggledOn)
        this.setState({toggledOn})
      }
    
      render() {
        const {children} = this.props
        const {toggledOn} = this.state
        return (
          <ToggleButton
            on={toggledOn}
            onClick={this.handleToggleClick}
            data-test="button"
          >
            {children}
          </ToggleButton>
        )
      }
    }
    
    Toggle.propTypes = {
      initialToggledOn: PropTypes.bool,
      onToggle: PropTypes.func.isRequired,
      children: PropTypes.any.isRequired,
    }
    
    export default Toggle

    Testing:

    import React from 'react'
    import {render} from 'enzyme'
    import Toggle from '../toggle'
    
    test('component render with default state', () => {
        const wrapper = render(<Toggle
        onToggle={() => {}}>I am child</Toggle>)
        expect(wrapper).toMatchSnapshotWithGlamor();
    })

    If anything changes in the component, such as style changes, snapshot will catch the changes and ask whether should update current snapshot to match the change or it might be the bug, you need to update the code. It save our time which previously we did as a manual thing, now its automaticlly.

    To make things work together, need to change some settings:

    jest.config.js:

    {
      "setupFiles": [
        "<rootDir>/config/jest/setup-tests.js"
      ],
      "setupTestFrameworkScriptFile": "<rootDir>/config/jest/setup-framework.js",
      "testEnvironment": "jest-environment-jsdom",
      "roots": [
        "demo/unit"
      ],
      "testPathIgnorePatterns": [
        "/helpers/"
      ],
      "snapshotSerializers": [
        "enzyme-to-json/serializer"
      ]
    }

    setup-tests.js:

    // here we set up a fake localStorage because jsdom doesn't support it
    // https://github.com/tmpvar/jsdom/issues/1137
    const inMemoryLocalStorage = {}
    window.localStorage = {
      setItem(key, val) {
        inMemoryLocalStorage[key] = val
      },
      getItem(key) {
        return inMemoryLocalStorage[key]
      },
      removeItem(key) {
        delete inMemoryLocalStorage[key]
      },
    }

    set-framework.js:

    import {matcher, serializer} from 'jest-glamor-react'
    
    expect.extend(matcher)
    expect.addSnapshotSerializer(serializer)
  • 相关阅读:
    Java 老兵不死,Kotlin 蓄势待发
    程序员写代码时戴着耳机,在听什么?
    推荐 7 个提升前端编程效率的 VSCode 插件
    去掉烦人的 !=null
    透析!软件开发未来 10 年的 8 个趋势
    10月01日总结
    09月29日总结
    09月28日总结
    09月27日总结
    09月26日总结
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7555365.html
Copyright © 2011-2022 走看看