在玩笑中访问状态和方法的问题

Question

我一直在使用 React 和 HOC 中的 jest 进行单元测试。目前，我在访问 class 的状态和方法时遇到问题。检查下面的示例代码

//Login.Container.js

import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
class Login extends Component {
    constructor(props) {
       super(props);
       this.state = {
          isShowLoader: false,
       };
       this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit() {
       //sample code
    }

    render() {
       return (
           <LoginComponent />
       );
    }

    function mapStateToProps(state) {
        return {
             task: state
        };
    }  

    function mapDispatchToProps(dispatch) {
        return bindActionCreators(
             Object.assign({},
                 actions),
                 dispatch);
    }

    export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login));

    Login.displayName = 'Login';

示例登录组件

    //Login.Component.js

    const LoginComponent = props => {
         return (<div>hi</div>);
    }

我使用 jest 和 enzyme 的示例测试套件

 //login.test.js
import { Provider } from 'react-redux';
import { history, store} from '../store';
import { ConnectedRouter } from 'react-router-redux';
describe('>>>Login --- Container', () => {       
let wrapperInner
it('should perform login container by using ComponentWapper', async () => {      
    wrapperInner = mount(<Provider store={store}>
                              <ConnectedRouter history={history}>
                                    <Login />
                              </ConnectedRouter>
                          </Provider>);       

    const instance = wrapperInner.instance();
    expect(wrapperInner.state('isShowLoader')).toBe(true);
    const responseJson = await instance.handleSubmit();       
});
});

Answer 1

终于，我找到了这个问题的解决方案。

   wrapperInner.find("Login").instance() // to access the methods

   wrapperInner.find("Login").instance().state // to access the state

有关详细信息，请查看此处：https://github.com/airbnb/enzyme/issues/361

在玩笑中访问状态和方法的问题

Issue with accessing the state and method in jest

reactjs

react-redux

jestjs

enzyme

higher-order-components