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. branchrecompose 的实用程序（我真的不认为我需要检查这个，因为他们可能已经但假设我想测试这样的功能）

我可以在 stackoverflow 上找到一些关于测试的文档，但没有一种资源可以提供总体思路。

4

1 回答 1

1

在测试您的组件时，您应该只测试您的组件，而不是容器（包装它的函数），因为它们是高阶组件。

如果您想通过recompose查看他们自己的测试来测试功能：https : //github.com/acdlite/recompose/blob/master/src/packages/recompose/tests/withState-test.js 并根据自己编写那。

至于您的组件，请确保您导出各个部分并对其进行测试。在您的场景中将是功能组件inEditMode：

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

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

于 2018-11-02T17:41:36.460 回答