Question

假设我有componentA已导入组件，componentB和componentC。

在componentA中，我有一个基于道具的组件方法someMethod，它将输出一个导入的组件。

someMethod() {
    const { someProps } = this.props
    if (someProps === 'desktop') {
        return (
            <componentB
                href="www.google.com" 
            >
                {this.children}
            </componentB>
        )
    } else {
        return (
            <componentC
                href="..." 
            >
                {this.children}
            </componentC>
        )
    }
}

如何为此正确编写测试断言？

这是我到目前为止所得到的，但输出不正确。

describe('someMethod', () => {
    it('should output componentB as component if device is "desktop"', () => {
        const wrapper = enzyme.shallow(<ComponentA {...props} />)
        const correctOut = '<ComponentB href="www.google.com"">Blah Blah</ComponentB>'
        const output = wrapper.instance().someMethod()
        expect(output).toEqual(correctOut)
    })
})

Answer 1

您必须将两个组件渲染为浅，才能获得相同的输出。将浅组件（correctOut）等同于正常渲染的组件（输出）将不相同。

describe('someMethod', () => {
    it('should output componentB as component if device is "desktop"', () => {
        const wrapper = enzyme.shallow(<ComponentA {...props} />)
        const correctOut = '<ComponentB href="www.google.com"">Blah Blah</ComponentB>'
        const output = shallow(wrapper.instance().someMethod())
        expect(output).toEqual(correctOut)
    })
})

注意：仅当您在组件内呈现的this.children等于 Blah Blah 时，这才有效。

Jest - 如何编写期望导入组件的测试？

1 个答案: