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

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());

}

我希望这会有所帮助。