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)
  • 相关阅读:
    VMI
    jsp环境搭建(Windows)
    128M小内存VPS优化与typecho环境搭建
    Shell字符串
    bash和sh区别
    PHPDocument 代码注释规范总结
    PHP 程序员的技术成长规划
    JavaScript:JSON
    mongoDB 使用手册
    PHP面向对象的标准
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7555365.html
Copyright © 2011-2022 走看看