Как проверить Textinput с помощью onKeyPress - PullRequest
Новая
       9

Как проверить Textinput с помощью onKeyPress

0 голосов
/ 08 января 2020

Я хочу проверить поле ввода с шуткой и энзимом 

  test('Filter Test', async () => {
    const setFilter = jest.fn();

    const bar = mount(
      <TestWrapper>
        <SearchAndFilterBar textFilters={textFilters} filterButtons={filterButtons} setFilterQuery={setFilter} />
      </TestWrapper>,
    );

    bar
      .find('#minValue')
      .simulate('change', { target: { value: '23' } })
      .simulate('keypress', { key: 'Enter', code: 13 });

    expect(setFilter).toHaveBeenCalled();
  });

код следующий 

<TextInput
   onKeyPress={onMinKeyPressHandler}
   id={'minValue'}
   invalid={false}
   value={minValue}
   onChange={e => !isNaN(Number(e.target.value)) && setMinValue(e.target.value)}
   placeholder={valueType}
/>

Проблема в том, что onMinKeyPressHandler не вызывается тестом .
Кто-то видит, почему тест не работает?

1 Ответ

0 голосов
/ 08 января 2020

Я не могу повторить вашу проблему. Тем не менее, я думаю, что вы можете упростить ваш компонент, чтобы вместо text входа быть number входом.

Установив type="number" и добавив min="0", вы можете пропустить проверку является ли это действительным номером в вашем onChange обратном вызове.

Я создал кодовую коробку с рабочими тестами (для запуска тестов перейдите на вкладку Tests):

Edit Testing Input - OnKeyPress

Если ваша установка отличается, разветвите коды и поле, отрегулируйте их по мере необходимости и добавьте в комментарии ниже.

компоненты / вход / index. js

import React from "react";
import PropTypes from "prop-types";

const Input = ({
  handleChange,
  handleKeyPress,
  name,
  min,
  placeholder,
  type,
  value
}) => (
  <input
    style={{ marginRight: 5 }}
    name={name}
    type={type}
    min={min}
    placeholder={placeholder}
    value={value}
    onChange={handleChange}
    onKeyPress={handleKeyPress}
  />
);

Input.propTypes = {
  handleChange: PropTypes.func.isRequired,
  handleKeyPress: PropTypes.func.isRequired,
  min: PropTypes.string,
  name: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
  type: PropTypes.string.isRequired,
  value: PropTypes.string
};

export default Input;

Компоненты / Input / __ tests __ / Input.test. js

import React from "react";
import { configure, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import Input from "../index";

configure({ adapter: new Adapter() });

const handleChange = jest.fn();
const handleKeyPress = jest.fn();
const name = "searchNumber";

const initProps = {
  handleChange,
  handleKeyPress,
  name,
  min: "0",
  placeholder: "Search for a number...",
  type: "number",
  value: ""
};

const value = "test";
const key = "Enter";

describe("Input", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(<Input {...initProps} />);
  });

  afterEach(() => {
    handleChange.mockClear();
    handleKeyPress.mockClear();
  });

  it("renders without errors", () => {
    expect(wrapper.find("input").exists()).toBeTruthy();
  });

  it("calls handleChange when a value is typed in", () => {
    wrapper.find("input").simulate("change", { target: { name, value } });

    expect(handleChange).toBeCalledWith(
      expect.objectContaining({ target: { name, value } })
    );
  });

  it("calls handleKeyPress when the Enter key is pressed", () => {
    wrapper.find("input").simulate("keypress", { key, value });

    expect(handleKeyPress).toBeCalledWith(
      expect.objectContaining({ key, value })
    );
  });
});
...