私はいくつかのテストソリューションを考え出していますが、コンポーネントが実際にレンダリングしていることをどのように知っているか予測できるかどうかはわかりません。 RadioBoxListがそれらをレンダリングする責任があるので他のコンポーネントを小道具でレンダリングする反応コンポーネントをテストするにはどうすればよいですか?
だから、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>
)
}
}
あります。私はそれがdiv要素は、私が小道具としてレンダリングしていたテキストのいずれかを持っているかどうかをチェックするように指定しているRadioBoxList.tests.jsで
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>
)
}
}
。
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'がレンダリングされるかどうかチェックしようとしていますか? –