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