测试过程中发生故障的情况下，反应组件

Question

我遇到了测试反应组件的问题。这是我的代码。

// Component textfield-input.jsx 
import React, { PropTypes } from 'react' 
import HelpComponent from '../../atoms/help-component' 

export default function TextField(props) { 
    const { helpMessage, label, error, ...rest } = props 
    return (
     <div className="text-field"> 
      <label htmlFor={props.name} className="name-label"> 
       {label} 
       {helpMessage ? 
        <HelpComponent message={helpMessage} /> : null 
       } 
      </label> 
      {props.required ? <span className="dot">*</span> : null} 
      <input className={`input ${error ? 'error' : ''}`} {...rest} /> 
      {error && (<span className="error-text">{error}</span>)} 
     </div> 
    ) 
} 

TextField.propTypes = { 
    name: PropTypes.string.isRequired, 
    label: PropTypes.string.isRequired, 
    helpMessage: PropTypes.string, 
    error: PropTypes.string, 
    required: PropTypes.bool, 
} 

这是我的TextField组件。

// Help Component 
import React, { PropTypes } from 'react' 

export default function HelpComponent(props) { 
    const direction = props.direction || 'right' 

    return (
     <i 
      className="fa fa-question-circle" 
      data-toggle="tooltip" 
      data-placement={direction} 
      title={props.message} 
      aria-hidden="true" 
     /> 
    ) 
} 

HelpComponent.propTypes = { 
    direction: PropTypes.string, 
    message: PropTypes.string.isRequired 
} 

这是我在TextField组件中使用的HelpComponent。

// Test textfield-input.spec.jsx 
import React from 'react' 
import { shallow } from 'enzyme' 

import TextField from '../../src/components/molecules/form/textfield-input' 

describe('Unit: TextField component',() => { 
    let component 
    let props = { 
     name: 'text', 
     label: 'Text', 
    } 
    const COMPONENT = <TextField {...props} /> 

    beforeEach(() => { 
     component = shallow(COMPONENT) 
    }) 

    it('should be react component',() => { 
     expect(component.exists()).to.be.true 
    }) 

    it('should render proper TextField',() => { 
     expect(component.find('.text-field').exists()).to.be.true 
     expect(component.find('.name-label').contains(props.label)).to.be.true 
     expect(component.find(`input[name="${props.name}"]`).exists()).to.be.true 
    }) 

    it('should render help message',() => { 
     component.setProps({ helpMessage: 'help message' }) 
     expect(component.find('.fa').exists()).to.be.true 
    }) 
}) 

测试规格。应该测试TextField输入。但'应呈现帮助信息'案件失败。任何其他案件的作品。

AssertionError：预计虚假为真。但它应该是真的。

编辑：从浅转换到挂载后情况更糟。所有情况都会失败 - “应该是反应组件”的例外 - 通过。

解决方案： @shota是正确的。我应该使用安装而不是浅。但我的测试用例也是错误的。这是正确的方法。

expect(component.find('.name-label').text()).to.equal(props.label) 

代替

expect(component.find('.name-label').contains(props.label)).to.be.true 

现在一切工作正常。

Thx〜！

Answer 1

您正在使用shallow呈现，这就是它失败的原因。使用浅色渲染时，子组件不会被渲染，但会保留为组件。

因此，在你的情况下，它不会进入子组件，并测试该类是否存在，但在渲染方法和原始组件中测试立即节点而不呈现它们。

所以，如果你需要测试的子组件也一样，你需要full dom rendering