我正在尝试为连接到我们的 redux 存储的一些 React 组件设置一些集成测试。
我们的一般模式是一个常量(而不是组件),它与 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>
)
};
如果我将测试更改为使用底层反馈组件而不是容器,它不会崩溃(但我认为商店不会正确连接,因为不会调用 mapstatetoprops。
如果我在测试中使用 console.log 记录组件,它们都会返回我所看到的对象,所以我不太明白这个错误。
反馈容器:
{ '$$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: {} }
根据一些阅读,我认为这可能归结为某些版本兼容性,这就是我的 package.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();
关于reactjs - 尝试在 react-testing-library 中呈现组件时出错 - 得到一个对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57959972/
相关文章:
html - 输入 DOM 元素字体大小小于预期,直到第一次单击页面
sql-server - SSMS query-window 连接选项在网络断开后全部禁用,更正后无
c# - 在 ASP.NET Core 中通过代码优先在 SQL 中使用 FileStream
keras - 在不运行模型的情况下计算 Keras 中的损失
c# - Bot 在 MS TEAMS channel 中尝试发送自适应卡时抛出 "Operatio
java - Hibernate.unproxy 有任何副作用吗?
python - "You should never modify something you ar