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

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

我正在尝试使用

编写测试用例

Jest

testing-library/react

这是我的错误

Answer 1

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

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

或

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

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

I am facing problem to test my custom component

unit-testing

reactjs

jestjs

react-testing-library