Я столкнулся с проблемой при тестировании моего пользовательского компонента - PullRequest
Новая
       42

Я столкнулся с проблемой при тестировании моего пользовательского компонента

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

Я создал свое поле NumberInput пользовательского компонента. Я новичок в написании тестовых случаев, поэтому я просто пытаюсь написать один простой тестовый пример и хочу выполнить его успешно.

Вот мой компонент 

import React from 'react';
import PropTypes from 'prop-types';
import NumberFormat from 'react-number-format';

import TextField from 'components/TextField';

function CustomInput(props) {
  return <TextField {...props} />;
}

function NumberInput(props) {
  const { onChange, ...otherProps } = props;
  return (
    <NumberFormat
      thousandSeparator
      decimalSeparator="."
      decimalScale={2}
      {...otherProps}
      customInput={CustomInput}
      onValueChange={values => {
        const { value } = values;
        onChange(value);
      }}
    />
  );
}

NumberInput.propTypes = {
  onChange: PropTypes.func,
};

export default NumberInput;

, и я пытаюсь написать контрольный пример для этого 

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { NumberInput } from '../index';


describe('<NumberInputField />', () => {
  it('Expect to have unit tests specified', () => {
    const { container } = render(<NumberInput />);

    const NumberFormat = container.firstChild
    fireEvent.change(NumberFormat, { target: { value: 10 } });
    expect(NumberFormat.value).toBe(10);
    //expect(true).toEqual(false);
  });
});

Я пытаюсь написать контрольный пример, используя

Jest

testing-library / реаги *

Это моя ошибка enter image description here

1 Ответ

1 голос
/ 23 января 2020

Вы импортируете NumberInput как именованный экспорт, но на самом деле это экспорт по умолчанию.

Изменить import { NumberInput } from '../index'; на import NumberInput from '../index';

ИЛИ

Изменить Ваш экспорт от export default NumberInput; до export { NumberInput };

...