我第二次测试有错误。他们怎么了?我按文档进行了所有操作,但有错误:“无法读取未定义的属性'prop'”。我尝试使用提供程序,但对我没有帮助,也许我做错了什么?
我可以以某种方式调试它吗?
BoardContainer.test.js
import React from 'react'
import configureStore from 'redux-mock-store'
import ConnectedBoard,{Board} from './BoardContainer'
import { shallow, configure,mount} from 'enzyme'
import Adapter from 'enzyme-adapter-react-16';
import {Provider} from 'react-redux'
import PropTypes from 'prop-types';
configure({adapter: new Adapter()});
const boards = [{
id: 1,
title: 'first_board'
}, {
id: 2,
title: 'second_board',
}];
describe('>>>H O M E --- REACT-REDUX (Shallow + passing the {store} directly)',()=> {
const initialState = {boards: boards};
const mockStore = configureStore();
let store, wrapper;
beforeEach(()=>{
store = mockStore(initialState);
wrapper = shallow( <Provider store={store}><ConnectedBoard /></Provider> );
})
it('+++ render the connected(SMART) component', () => {
expect(wrapper.length).toEqual(1);
});
it('+++ check Prop matches with initialState', () => {
expect(wrapper.prop('boards')).toEqual(initialState.boards);
});
})
BoardContainer.js
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {loadBoards} from '../../actions/boardJS'
import Board from '../../components/Board/Board'
export class BoardContainer extends Component {
getBoards() {
fetch(process.env.REACT_APP_DEV_API_URL + `todo_lists`)
.then(res => res.json())
.then(data => {
this.props.dispatch(loadBoards(data))
})
}
componentDidMount() {
this.getBoards()
}
render() {
return <Board/>
}
}
const mapStateToProps = state => {
return {
boards: state.boards
}
}
export default connect(mapStateToProps)(BoardContainer)
如果有人知道解决方案,那就太好了:)
答案 0 :(得分:0)
您似乎正在查看提供程序组件而不是ConnectedBoard组件的道具。
我还要注意以下几点:
“在浅层包装上调用时,.prop(key)将返回组件呈现的根节点上的props值,而不是组件本身。” -https://airbnb.io/enzyme/docs/api/ShallowWrapper/prop.html
您能详细说明一下,说缺少属性“ prop”,但这意味着包装器没有分配ShallowWrapper。这意味着beforeEach尚未执行...我怀疑测试1是否成功。
道具本身的错误事实是否未定义?当您尝试访问属性“木板”