我在测试我的自定义组件时遇到问题

Question

我已经创建了我的自定义组件 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);
  });
});

我正在尝试使用

编写测试用例

开玩笑

测试库/反应

这是我的错误

Answer 1

您将 NumberInput 作为命名导出导入，但它实际上是默认导出。

将import { NumberInput } from '../index'; 更改为import NumberInput from '../index';

或

将您的导出从 export default NumberInput; 更改为 export { NumberInput };