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)
  • 相关阅读:
    TinyCMips
    C++坑点集合
    2017,不能再咸鱼了
    浅谈C语言变量声明的解析
    独自handle一个数据库大程有感
    Async Programming
    04python 中的各种推导式(python函数)
    03python 迭代器与生成器(python函数)
    02python 装饰器(python函数)
    01python 中的函数与函数式编程(python函数)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7555365.html
Copyright © 2011-2022 走看看