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：预期false为真。但它应该是真的。

编辑：将表单浅转换为mount后更糟糕。然后所有案例都失败了 - '应该是反应组件'的例外 - 传递。

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

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

测试期间失败的情况反应组件

1 个答案: