反应，测试输入占位符

Question

我有这个 html 输入：

<input
  id='palapa'
  className='amount'
  placeholder={props.placeholder}
  type='number'
/>

我知道它需要一个 value 和一个 onChange 事件，但现在我想测试占位符的值，换句话说，我将检查某些 props 正在渲染。

我尝试过但没有成功：

const defaultProps = {
    options: [
      { value: 'CLP', label: 'CLP' },
      { value: 'USD', label: 'USD' }
    ],
    placeholder: 'thePlaceHolder',
    topMessage: 'topMessage'
};

//<CurrencyInput > returns the input from above

const rendered = render(<CurrencyInput {...defaultProps} />);
const input = rendered.getByLabelText('palapa');
console.log(input); // undefined, I'm trying to get here "thePlaceHolder"

有嗨吗？

Answer 1

尝试 const input = rendered.getByPlaceholderText('palapa');（参见 https://testing-library.com/docs/dom-testing-library/api-queries/#byplaceholdertext）

如果您的 input 是 wrapped/associated 并且 label

，

getByLabelText 将起作用

Answer 2

试试这个方法，

 const defaultProps = {
      options: [
        { value: 'CLP', label: 'CLP' },
        { value: 'USD', label: 'USD' }
      ],
      placeholder: 'thePlaceHolder',
      topMessage: 'topMessage'
    };
    const {container} = render(<CurrencyInput {...defaultProps} />);
    const input = container.querySelector('#palapa');
    console.log(input.placeholder); // thePlaceHolder
    expect(input.placeholder).toBe('thePlaceHolder');

   --------------[or]----------------

  const rendered = render(<CurrencyInput {...defaultProps} />);
  const input = rendered.getByPlaceholderText('thePlaceHolder');
  console.log(input); //thePlaceHolder

反应，测试输入占位符

React, testing for input placeholder

reactjs

jestjs

react-testing-library