如何测试渲染具有道具的其他组件的反应组件？

Question

我试图想出一些测试解决方案，但我一直无法弄清楚我将如何知道/预测组件实际呈现的内容。

因此，有一个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 }], 
    }]; 

Answer 1

有多种测试方法。 我为您提供了一些可以尝试的方法。

import React from 'react'; 
import expect from 'expect'; 
import { Meteor } from 'meteor/meteor'; 
import { shallow } 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}/>); 

    // 1. 
    expect(wrapper.find('div.item')).to.have.length(questions[0].responses.length); 

// 2. or 
expect(wrapper.find(RadioBox)).to.have.length(questions[0].responses.length); 

//3. Checking for props 
expect(wrapper.find(RadioBox).first().props().response).to.equal(questions[0].responses[0]); 

//4.Checking for innertext 
expect(wrapper.find("input[type="radio"]").first().text()).to.equal(questions[0].responses[0]); 
    }); 

//5. Match the rendered element itself e.g 
const radioBox = shallow(<RadioBox key={0} response={questions[0].responses[0]}/>); 

expect(wrapper.find(RadioBox).first().matchesElement(
    radioBox 
)).to.equal(true); 

//6. Match the rendered html 
expect(wrapper.find(RadioBox).first().html()).to.equal(radioBox.html()); 

} 

我希望这会有所帮助。