我试图想出一些测试解决方案,但我一直无法弄清楚我将如何知道/预测组件实际呈现的内容。如何测试渲染具有道具的其他组件的反应组件?
因此,有一个RadioBoxList
import React, { Component } from 'react';
import RadioBox from './RadioBox'
import FlipMove from 'react-flip-move';
import Message from './Message'
export default class RadioBoxList extends Component {
constructor(props){
super(props);
}
renderResponses(){
if(this.props.responses === undefined){
return (
<Message message='There are no radioboxes in this list :/' />
)
} else {
return this.props.responses.map((response,index) => {
return <RadioBox key={index} response={response}/>
});
}
}
render(){
return(
<div>
<FlipMove duration={350} easing="ease-out">
{this.renderResponses()}
</FlipMove>
</div>
)
}
}
,其利用所谓的RadioBox另一个组件,所以RadioBoxList负责渲染他们。
import React, {Component} from 'react';
export default class RadioBox extends Component{
render(){
return(
<div className="item">
<input name='radio' type='radio' value={this.props.response} /> <span>{this.props.response}</span>
</div>
)
}
}
在RadioBoxList.tests.js中,我已经指定我想要它检查div元素是否具有我作为道具渲染的任何文本。
import React from 'react';
import expect from 'expect';
import { Meteor } from 'meteor/meteor';
import { mount } from 'enzyme';
import {questions} from '../fixtures/fixtures';
import RadioBoxList from './RadioBoxList';
if (Meteor.isClient) {
it('should render question responses as inputs',function(){
const wrapper = mount(<RadioBoxList responses={questions[0].responses}/>);
expect(wrapper.find('div')).toContain(questions[0].responses[0]);
});
}
在这一点上,我不确定我是否遵循正确的方法来通过div标签中的元素和文本。
当我运行测试时出现错误。
TypeError: Reflect.ownKeys called on non-object
我用于本次测试的灯具是;
export const questions = [
{
_id: '1',
question: 'What is the capital of Spain ?',
responses: ['Madrid', 'Malaga', 'Almeria', 'Barcelona'],
feedbacks: [{ response: 'Madrid', count: 9 },
{ response: 'Malaga', count: 3 },
{ response: 'Almeria', count: 2 },
{ response: 'Barcelona', count: 3 }],
},
{
_id: '2',
question: 'What is the capital of France ?',
responses: ['Paris', 'Nice', 'Narbonne', 'Lyon'],
feedbacks: [{ response: 'Paris', count: 51 },
{ response: 'Nice', count: 34 },
{ response: 'Narbonne', count: 32 },
{ response: 'Lyon', count: 21 }],
}];
我有点不确定这是什么?你想检查'RadioBox'是否被渲染? –