测试反应组件期间的失败案例

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 输入。但是 'should render help message' 案例失败了。任何其他情况都有效。

AssertionError：预期 false 为 true。但应该是真的。

编辑：从浅层切换到安装后更糟。那么所有情况都失败了——“应该是反应组件”的例外——通过。

解决方案： @shota 是对的。我应该使用 mount 而不是 shallow。但是我的测试用例也错了。这是正确的方法。

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

而不是

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

现在一切正常。

谢谢~！

Answer 1

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

因此，在您的情况下，它不会进入子组件并测试该类是否存在于那里，而是测试渲染方法和原始组件中的直接节点而不渲染它们。

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