使用酶设置 redux 连接反应组件的状态

Question

import configureMockStore from 'redux-mock-store';
import NavBar from '../components/NavBar/NavBar';

const mockStore = configureMockStore(middlewares);
const store = mockStore(initialState);

wrapper = mount(
    <BrowserRouter> 
        <Provider store={store}>
            <NavBar {...props} />
        </Provider>
    </BrowserRouter> 
);

如何更新包装器中存在的 NavBar 组件的状态？

我尝试使用wrapper.setState({displayMenu:true}) 进行更新，但它没有更新，因为我认为 wrapper 是组件与 Provider 的包装，所以 NavBar 的状态没有更新。

Answer 1

要解决这个问题，可以这样写：

import ConnectedNavBar, { NavBar } from '../components/NavBar/NavBar';

const wrapper = mount(
    <Provider store={store}>
        <ConnectedNavBar/>
    </Provider>
);

const navBarInstance = result.find(NavBar).instance() as NavBar;
navBarInstance.setState({displayMenu:true});

获取有关 redax 组件的信息

navBarInstance.props
navBarInstance.state

注意！ 注意组件是如何导入的

import ConnectedNavBar, { NavBar } from '../components/NavBar/NavBar';

并且redax组件导出如下：

export class NavBar extends Component<Props, State>{} 
/*...*/
export default connect<StateProps>(mapStateToProps)(NavBar);

希望能解决你的问题