REACT FIRE 🔥 event: How to unit test a text input field...

Return to site

REACT FIRE 🔥 event: How to unit test a text input field

· react,testing

Imagine you have a simple field formatting a credit card number in packets of 4 digits

🖼️GUI:

return (
    <div className="App">
      <header className="App-header">
      <label className='labelnumber'>
		Card Number: 
		<input type="text" placeholder="e.g. 1234 5678 9123 0000" 
		onChange={handleInput} name="number" className='card-input' minLength={19} 
		data-testid="hpi-number"/>
			</label>
      </header>
    </div>
  );

⚙️Controller:

const handleInput = (e) => {
		if (e.target.name === "number" && e.target.value) {
			e.target.value = e.target.value.replace(/\s/g, '')
			.replace(/(.{4})/g, '$1 ')
			.trim()
			.slice(0, 19);
		}
		setNumber(e.target.value );
	}

A unit test follows the '3 As' rule: Arrange, Act, and Assert.

Let's follow these steps in testing a React input field by faking the input filling, then reading it and comparing the outcome with what is expected.

🧪Unit test:

test('format number with space each 4 digits pack', () => {
  render(<App />)  
  fireEvent.change(
		screen.getByTestId('hpi-number'), 
		{target: {value: '1234123412341234'}}
		)
  expect(screen.getByTestId('hpi-number'))
		.toHaveValue('1234 1234 1234 1234');
});

👨💻Code repo:

Github repo