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)
  • 相关阅读:
    遍历Map的四种方法
    过滤器和拦截器的区别
    拦截器、过滤器做什么的?
    Linux中常用操作命令
    什么是反射?
    得到字节码的方式有哪三种?
    web考试内容1
    spring注入方式
    PHP基础 第三天
    堆和栈,值传递和地址传递(引用传递)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7555365.html
Copyright © 2011-2022 走看看