2017-06-20 49 views
0

使用最近開始重新構圖(https://github.com/acdlite/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;

我如何測試給定的道具孩子長?我試過這樣的東西,但它不起作用。

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

回答

1

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

掛載渲染所有的孩子以及單元測試不好。