Фермент Мелкий, не находящий компонент «Реактивный бутстрап» - PullRequest
Новая
       20

Фермент Мелкий, не находящий компонент «Реактивный бутстрап»

0 голосов
/ 06 марта 2019

Ниже представлен компонент Sign In React SignIn, созданный с использованием Redux-форм 

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 , потому что я не смог получить шутку метод toHaveLength для работы. toHaveLength , кажется, используется только для проверки размера массивов или строк.Как я могу использовать шутку, чтобы сделать это?

1 Ответ

1 голос
/ 06 марта 2019

Если вы пытаетесь смоделировать отправку формы SignIn, вы фактически вызовете событие simulate в самой форме, а не в кнопке.

Вы можете смоделировать это с помощью этого кода: 

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

Вот некоторая информация о том, почему это из документов Enzyme:

  • В настоящее время моделирование событий для мелкого рендерера не распространяется, как это обычно можно ожидать в реальной среде. Как
    В результате необходимо вызвать .simulate () для фактического узла, который имеет
    набор обработчиков событий.
  • Несмотря на то, что имя подразумевает, что это имитирует реальное событие, .simulate () фактически нацеливается на опору компонента, основываясь на
    событие, которое вы даете. Например, .simulate ('click') фактически получит
    onClick опора и вызовите его.
  • Как отмечено в сигнатуре функции выше, передача фиктивного события необязательна. Помните, что если код, который вы тестируете, использует
    событие для чего-то вроде, вызывая event.preventDefault () или обращаясь к любое из его свойств, вы должны предоставить фиктивный объект события с
    Свойства, которые требует ваш код.

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

...