“ TypeError:无法读取未定义的属性'parentNode'”酶装载

时间:2020-05-13 07:11:02

标签: unit-testing redux jestjs enzyme

下午好,我想使用酶和Jest测试Header组件。我的组件使用redux-hooks,因此,我必须将我的组件包装在提供程序中。但是,在将组件包装在提供程序中之后,出现了TypeError: Cannot read property 'parentNode' of undefined错误。请告诉我如何解决,谁遇到了这样的错误

Screenshot of error

测试:

import * as React from 'react';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import createSagaMiddleware from 'redux-saga';
import { configure, shallow, mount } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import rootSaga from '../../../redux/saga/rootSaga';
import Header from '../Header';

const sagaMiddleware = createSagaMiddleware();
const mockStore = configureMockStore([sagaMiddleware]);
const store = mockStore({});
sagaMiddleware.run(rootSaga);
const adapter = Adapter as any;
configure({ adapter: new adapter() });

describe('testing actions userDataActionCreators', () => {
  it('check month and years dropdowns displayed', () => {
    const DateInputComponent = mount(<Provider store={store}>
      <Header page="auth" />
    </Provider>);
    console.log('DateInputComponent', DateInputComponent.debug());
    expect(DateInputComponent.hasClass('auth')).toEqual(true);
  });
});

我的组件:

    const Header = (props: any) => {
      const dispatch = useDispatch();

//... 
      const displayButtons = (page: string) => {
        switch (page) {
          case 'auth': return(
                    <>
                        <GoogleLogin
                            clientId="411912187634-09e2pudtp337atlucsnlfaeb13ie4ntj.apps.googleusercontent.com"
                            buttonText=""
                            onSuccess={responseGoogle}
                            onFailure={responseGoogle}
                            cookiePolicy={'single_host_origin'}
                            className="header_auth auth"
                        />
                        <FacebookLoginWithButton
                            appId="263020944839635"
                            textButton=""
                            fields="name,email,picture"
                            onClick={responseFacebook}
                            callback={responseFacebook}
                            icon={<Button circular color="facebook" icon="facebook" />} />
                    </>
          );
          case 'list': return(
                    <>
                        <Styled.BtnWrapper>
                          <Styled.ButtonStyled
                              size="massive"
                              circular
                              icon="user"
                              onClick={handleRouteAccount}/>
                        </Styled.BtnWrapper>
                        <Styled.BtnWrapper>
                          <Styled.ButtonStyled
                              size="massive"
                              circular
                              icon="log out"
                              onClick={logOut}/>
                        </Styled.BtnWrapper>
                    </>
          );
          case 'account': return <Styled.BtnWrapper>
            <Styled.ButtonStyled
                circular
                icon="arrow left"
                onClick={handleRedirectList}/>
          </Styled.BtnWrapper>;
        }
      };

      return (
          <div className="header_content">
            <Styled.HeaderStyled block>
                {displayButtons(props.page)}
            </Styled.HeaderStyled>
          </div>
      );
    };

    export default Header;

0 个答案:

没有答案