Блог

У меня есть этот ввод 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"
  

Есть какие-нибудь хитрости?

Попробуйте const input = rendered.getByPlaceholderText('palapa'); (см. https://testing-library.com/docs/dom-testing-library/api-queries/#byplaceholdertext )

getByLabelText будет работать, если ваш input обернут / связан с label

Попробуйте этот подход,

  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