我刚开始做酶测试,我制作了一种成分如下:
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);
在上面的组件中,我想测试以下内容:
Component
的绘制inEditMode
函数withState
和withHandlers
中的处理程序branch
实用程序(我不认为我真的需要检查它,因为它们可能已经完成了,但是假设我想测试这样的函数)我可以找到一些关于测试的堆栈溢出的文档,但是没有一个资源可以给出总体的概念。
发布于 2018-11-02 09:41:36
在测试您的组件时,您应该只测试您的组件,而不是容器(包装它的函数),因为它们是高阶组件。
如果您想测试来自recompose
的函数,请查看它们自己的测试:/withState-test.js,并在此基础上编写自己的测试。
至于您的组件,请确保导出各个部件并测试它们。在您的场景中,将是功能组件inEditMode
export const inEditMode = ({ mode }) => mode === MODE.edit;
这就是在这个组件上测试所需的全部内容。
https://stackoverflow.com/questions/46071341
复制