Question

以下是使用Redux表单制作的登录React SignIn组件

const renderInput = ({input,label,type,placeholder}) => {
  return (
      <div>
    <Form.Label>{label}</Form.Label>
    <Form.Control type={type} placeholder={placeholder} { ...input}/>
    </div>
  )
}

export let signInForm = props => {

    const { error,handleSubmit , pristine , submitting } = props

    return (
        <Container className="justify-content-md-center">

       <Alert variant="primary">Sign in here if you already have an account</Alert>

        <Form onSubmit={handleSubmit}>
            <Form.Group>           
            <Field name="email" component={renderInput} label="Email" type="email" placeholder="Email" />
            </Form.Group>

            <Form.Group>   
            <Field name="password" component={renderInput} label="Password" type="password" placeholder="Password" />
            </Form.Group>

            <Button type="submit"  disabled= { pristine || submitting }>Sign In</Button>

        </Form>

        </Container>

    )
}



export default signInForm = reduxForm ({
    form : 'signIn'
})(signInForm)

我对此进行的酶促浅测

import React from 'react';
import { shallow } from 'enzyme';
import {signInForm  as SignIn} from './SignIn';
import Button from 'react-bootstrap/Button'
import { expect } from 'chai';


describe('Test SignIn component', () => {
  it('Test click event', () => {
    const mockCallBack = jest.fn();

    let wrapper = shallow(<SignIn onSubmit={mockCallBack}/>);

    expect(wrapper.find(Button)).to.have.lengthOf(1);
})
})

我的测试输出显示 AssertionError：预期{}的长度为1，但为0

1）测试失败。在测试中找不到Button组件。我希望它的长度为1

2）我使用的是 chai 方法 to.Have.lengthOf ，因为我无法使用 jest 方法 toHaveLength 上班。 toHaveLength 似乎仅用于检查数组或字符串大小。我怎么能用玩笑来做到这一点？

Answer 1

如果您尝试模拟SignIn表单提交，则实际上会在表单本身而不是按钮上调用simulate事件。

您可以使用以下代码进行模拟：

wrapper.find('form').simulate('submit');

这是为什么来自酶文档的一些信息：

当前，浅层渲染器的事件模拟没有像在真实环境中通常期望的那样传播。作为
  结果，必须在具有
的实际节点上调用.simulate（）   事件处理程序集。

即使名称暗示这将模拟实际事件，.simulate（）实际上也将基于
定位组件的prop   如果你给它。例如，.simulate（'click'）实际上会得到
  并调用它。

如上面函数签名中所述，传递模拟事件是可选的。请记住，如果您要测试的代码使用
  事件，例如，调用event.preventDefault（）或访问   它的任何属性都必须提供带有
的模拟事件对象   代码需要的属性。

https://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html

酶浅未找到react-bootstrap组件

1 个答案: