javascript - 如何使用 recompose hocs 测试 React 组件

Question

最近开始使用重构 ( https://github.com/acdlite/recompose )

我想知道我应该如何处理用一些 hocs recompose 提供的单元测试组件？我喜欢用函数式方法替换整个类组件，但就单元测试而言，这完全不正确。

例如使用给定的列表组件

export const ListItem = toClass(pure(({ text }) => <li>{text}</li>));
const renderItems = R.map(t => <ListItem key={t} text={t} />);

export const ListComponent = toClass(({ todos, name, updateName, addTodo }) =>
  <div>
    <input onChange={updateName} value={name} />
    <button onClick={() => addTodo(name)}>add todo</button>
    <ul>
      {renderItems(todos)}
    </ul>
  </div>
);

...

const List = compose(
  withReducer("state", "dispatch", listReducer, props => ({
    ...initialState,
    ...props
  })),
  withHandlers({
    updateName: ({ dispatch }) => e =>
      dispatch({ type: "UPDATE_NAME", payload: e.target.value }),
    addTodo: ({ dispatch, name }) => name =>
      dispatch({ type: "ADD_TODO", payload: name })
  }),
  flattenProp("state")
)(ListComponent);

export default List;

如何使用给定的 Prop 测试 child 的长度？我已经尝试过类似的方法，但它不起作用。

it("renders todos list", () => {
    const component = shallow(<List todos={["todo1", "todo2", "todo3"]} />);
    expect(component.instance().children).toHaveLength(3);
  });

Answer 1

不要使用mount而不是shallow。使用 .dive() 和 shallow 代替。

Mount 也会渲染所有子项，这不利于单元测试。