尝试呈现反应测试库中的组件时出错-获得对象 [英] Error when trying to render component in react-testing-library - got an object
本文介绍了尝试呈现反应测试库中的组件时出错-获得对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试设置连接到我们的Redux存储区的某些Reaction组件的一些集成测试。
我们的一般模式是一个常量(而不是组件)，它使用redux"连接"到存储区(我认为这只是问题的背景，因为我的正常组件也有相同的问题)。
我正在关注https://testing-library.com/docs/example-react-redux
我收到此错误
console.error node_modules/react/cjs/react.development.js:172
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check your code at feedback.test.js:32.
console.error node_modules/react-dom/cjs/react-dom.development.js:19814
The above error occurred in the <Provider> component:
in Provider (at feedback.test.js:26)
这是我的测试
import React from 'react';
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import {render, getByTitle, fireEvent} from '@testing-library/react'
//import '@testing-library/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'
import {FeedbackContainer} from '../feedbackContainer'
import {defaultState, reducer} from '../../../../redux/modules/feedback'
function renderWithRedux(
component,
{
initalState, store = createStore(reducer, defaultState)
} = {}
) {
return {
...render(<Provider store={store}>{component}</Provider>)
}
}
it('increments the counter', () => {
console.log(<FeedbackContainer/>)
const {container} = renderWithRedux(<FeedbackContainer />) <-- line 32
})
我的容器组件如下所示：
import { connect } from 'react-redux';
import { Feedback } from './feedback';
import { compose, lifecycle, withHandlers } from 'recompose';
import { actions } from '../../../redux/modules/feedback';
export const mapStateToProps = (state, ownProps) => ({
// snipped state maps
});
export const mapDispatchToProps = {
// snipped functions
};
const enhance = compose(
connect(mapStateToProps, mapDispatchToProps),
withHandlers({
sendFeedbackHandler: props => () => props.sendFeedback(props),
handleResize: props => () => props.setWindowSize(),
}),
lifecycle({
componentDidMount() {
const {handleResize} = this.props
window.addEventListener('resize',handleResize);
},
componentWillUnmount() {
this.props.clearFeedback();
const {handleResize} = this.props
window.removeEventListener('resize', handleResize);
},
}),
);
export const FeedbackContainer = enhance(Feedback);
Feedback.js如下：
import React from 'react';
import ReactStars from 'react-stars';
export const Feedback = (props) => {
const ratingChanged = (rating) => {
props.setRating(rating);
}
const {sendFeedbackHandler} = props
var title = null;
switch (props.type) {
case "REF":
title = "Rate this FAQ"
break;
default:
title = "Rate my experience"
break
}
var feebackLayout;
var buttonClassNames = "btn btn-success btn-cons pull-right";
if (props.apertureWidth > 768) {
buttonClassNames += " margin-right-0px ";
feebackLayout = (
<div>
<h5 className="light semi-bold text-center" style={{"margin":"0px"}}>
{title}
</h5>
<div style={{"textAlign":"center"}}>
<div data-test-id='feedback-stars' className="center" style={{"display":"inline-block","float":"none"}}>
<ReactStars
value={props.rating}
count={5}
onChange={ratingChanged}
size={24}
color2={'#ffd700'}
half={false}
/>
</div>
</div>
</div>
)
} else {
buttonClassNames += " margin-right-14px ";
title = "Rate this:"
feebackLayout = (
<div style={{"textAlign":"center"}}>
<h5 className="light semi-bold text-center"
style={{"margin":"0px","display":"inline","verticalAlign":"middle","paddingRight":"10px"}}>
{title}
</h5>
<div style={{"textAlign":"center","display":"inline-block","verticalAlign":"middle"}}>
<ReactStars
value={props.rating}
count={5}
onChange={ratingChanged}
size={24}
color2={'#ffd700'}
half={false}
/>
</div>
</div>
)
}
return (
<div className="card card-default feedbackCard" style={{"height": "100%","borderTopRightRadius": "2px", "borderTopLeftRadius": "2px"}}>
<div className="card-block" style={{padding: '20px 20px 20px 20px'}}>
<div hidden={props.feedbackSubmitted}>
{feebackLayout}
<div hidden={props.feedbackHidden}
style={{"paddingTop": props.apertureWidth > 768 ? "0px" : "10px"}}>
<div>
<textarea
data-test-id='feedback-text'
className="form-control"
style={{"height":"unset"}}
placeholder="Add any comments"
rows={2}
onChange={event => props.setFeedback(event.target.value)}
/>
</div>
<div style={{paddingTop: "5px"}}>
<button
data-test-id='feedback-submit'
className={buttonClassNames}
onClick={sendFeedbackHandler}
>
{props.buttonText}
</button>
</div>
</div>
</div>
<div hidden={!props.feedbackSubmitted}>
<h5 className="light semi-bold text-center">
{props.feedbackSubmittedMessage}
</h5>
</div>
</div>
</div>
)
};
如果我将测试更改为使用基础反馈组件而不是容器，它不会崩溃(但我认为存储区将不会正确连接，因为mapstatToprops将不会被调用。
如果我将测试中的组件合并到日志中，则它们都返回我所能看到的对象，因此我不太理解该错误。
Feedback Container：
{ '$$typeof': Symbol(react.element),
type:
{ mapStateToProps: [Function],
mapDispatchToProps: [Function: mapDispatchToProps],
reactComponent: { [Function: WithHandlers] displayName: 'withHandlers(lifecycle(Component))' },
mockDispatch:
{ [Function: mockConstructor]
_isMockFunction: true,
getMockImplementation: [Function],
mock: [Getter/Setter],
mockClear: [Function],
mockReset: [Function],
mockReturnValueOnce: [Function],
mockReturnValue: [Function],
mockImplementationOnce: [Function],
mockImplementation: [Function],
mockReturnThis: [Function],
mockRestore: [Function] } },
key: null,
ref: null,
props: {},
_owner: null,
_store: {} }
反馈：
{ '$$typeof': Symbol(react.element),
type: [Function],
key: null,
ref: null,
props: {},
_owner: null,
_store: {} }
根据一些阅读，我认为这可能是由于一些版本兼容性，这就是我的包中的内容。json：
"jest": "^21.2.1",
"@testing-library/jest-dom": "^4.1.0",
"@testing-library/react": "^9.1.4",
"react": "^16.8.6",
"react-dom": "^16.0.0",
"react-redux": "^5.0.5",
"redux": "^3.7.2",
"redux-saga": "^0.15.6",
我哪里错了？！
推荐答案
请在此处查看我的回答：What is wrong with react-testing-library render function? It returns an error on certain objects
expect(() =>
render(
<AddAssessmentFormModal
recordDetailView={<RaDeathDecisionEditView />}
addRecord={(record: any) => addAssessment(record)}
/>,
{
wrapper: () => <AppWrapper store={store} />,
}
)
).not.toThrow();
这篇关于尝试呈现反应测试库中的组件时出错-获得对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
