我面临测试我的自定义组件的问题

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);
  });
});

我正在尝试使用编写测试用例

开玩笑

testing-library / react

这是我的错误

Answer 1

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

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

OR

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