Question

所以我有一个组件（BoardCompleted）映射其prop并生成一系列较小的组件（BoardCompletedItem）。问题是子组件连接到Redux。

我在测试映射部分时遇到问题。我似乎无法让映射的孩子出现。或者也许我不是以正确的方式寻找它......有人可以看看我在这里做错了什么。

首先，这是父组件，它执行映射：

import React from 'react'; 
import BoardCompletedItem from '../BoardCompletedItem/BoardCompletedItem';
import { connect } from 'react-redux';  

export class BoardCompleted extends React.Component {
    render() {

        const myBoard = this.props.boards.find(board => board.id === this.props.currentBoardId);  
        const items = myBoard.completed.map((item, key) => (
            <BoardCompletedItem  
                item={item} 
                key={key} 
            />
        )); 

        return (
            <section className="g-column">
                <div className="g-item-title">
                    <h3 className="g-title">Completed</h3>
                </div>
                { items }
            </section>
        )
    }
}

const mapStateToProps = state => ({
    currentBoardId: state.currentBoardId,
    boards: state.boards
})

export default connect(mapStateToProps)(BoardCompleted);

这是子组件：

import React from 'react'; 
import { Transition } from 'react-transition-group'; 
import { deleteCompleted } from '../../actions/mainActions'; 
import { connect } from 'react-redux'; 

export class BoardCompletedItem extends React.Component {

    handleDelete() {
        const value = this.props.item.value; 
        const board_id = this.props.currentBoardId; 
        const user_id = this.props.currentUser.id
        this.props.dispatch(deleteCompleted(value, board_id, user_id)); 
    }

    render() {
        return ( 
                <div > 
                    {this.props.item.value}
                    <div className="g-graphic-button" onClick={() => this.handleDelete()}>
                        <i className="fas fa-times"></i>
                    </div>
                </div>
        )
    }
}

const mapStateToProps = state => ({
    currentBoardId: state.currentBoardId, 
    currentUser: state.currentUser
})

export default connect(mapStateToProps)(BoardCompletedItem);

这是我的测试。我在这里显然做错了什么：

import React from 'react'; 
import { shallow, mount } from 'enzyme'; 
import  BoardCompleted  from '../components/BoardCompleted/BoardCompleted'; 
import BoardCompletedItem from '../components/BoardCompletedItem/BoardCompletedItem';
import { Provider } from 'react-redux'; 
import configureStore from 'redux-mock-store'

const middlewares = []
const mockStore = configureStore(middlewares)

describe('BoardCompleted', () => {
    it('renders BoardCompletedItem without crashing', () => {
        const initialState = {
            boards: [{id: 1, completed: [{value: 'example'}]}],
            currentBoardId: 1 
        }
        const store = mockStore(initialState)
        const wrapper = mount(<Provider store={store}><BoardCompleted /></Provider>); 
        expect(wrapper.contains(<BoardCompletedItem />)).toEqual(true); 
    }); 
});

测试运行，但我得到了：

expect(received).toEqual(expected)

    Expected value to equal:
      true
    Received:
      false

有什么想法？我对测试连接组件很新。

Answer 1

测试是正确的，它是假的，<BoardCompletedItem />正在渲染而没有键和项目，所以它没有像你期望的那样呈现。

将其更改为<BoardCompletedItem item={item} key={key} />，并使用模拟数据

映射项目和密钥

测试 - 使用Redux的酶映射组件

1 个答案: