代码之家  ›  专栏  ›  技术社区  ›  Ajay Gaur

如何在withHandlers、branch和withState重组酶中测试处理程序?

  •  7
  • Ajay Gaur  · 技术社区  · 7 年前

    import React from 'react';
    import {
      compose,
      withState,
      withHandlers,
      branch,
      pure,
      renderComponent,
    } from 'recompose';
    
    import Fields from './components/Fields';
    import Flow from './components/Flow';
    
    export const MODE = {
      preview: 'preview',
      edit: 'edit',
    };
    
    const inEditMode = ({ mode }) => mode === MODE.edit;
    
    const Component = branch(
      inEditMode,
      renderComponent(Fields),
      renderComponent(Flow),
    )(Flow);
    
    const Tab = pure(props => <Component {...props} />);
    
    export default compose(
      withState('mode', 'changeMode', props => {
        const path = props.path;
    
        return props.path ? MODE.preview : MODE.edit;
      }),
      withHandlers({
        changeMode: ({ changeMode }) => () => changeMode(currentState => currentState === MODE.preview ? MODE.edit : MODE.preview),
        onApprovalChange: ({ onAction, entity }) => data => {
          onAction({ ...data, status: 'UPDATED' }, data.id);
        },
      }),
    )(Tab);
    

    在上述组件中,我想测试以下内容:

    1. 渲染 Component

    2. inEditMode 组件的功能

    3. 中存在处理程序 withState withHandlers

    4. branch 重组的实用性(我真的不认为我需要检查这个,因为他们可能已经检查过了,但假设我想测试这样的函数)

    1 回复  |  直到 6 年前
        1
  •  1
  •   Gatsbimantico    6 年前

    在测试组件时,应该只测试组件,而不是容器(包装它的函数) 高阶分量

    recompose 看看他们自己的测试: https://github.com/acdlite/recompose/blob/master/src/packages/recompose/ tests /withState-test.js 然后在这个基础上写下你自己的。

    inEditMode

    export const inEditMode = ({ mode }) => mode === MODE.edit;
    

    这就是您需要在这个组件上测试的全部内容。