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

}

我希望这会有所帮助。

如何测试使用props制作其他组件的反应组件？

1 个答案: