React Testing Librbary & Jest part 1-1 Test-Driven Development
===


---

###### tags: `React Testing Library`, `Jest`, `React`

# What is Test-Driven Development?

- A methodology in software development that focuses on an iterative development cycle where the emphasis is placed on writing test cases before the actual feature or function is written.
- Usually follows the "Red-Green-Refactor" cycle:
- Add a test to the test suite
- 🔴 Run all the tests to ensure the new test **fails**
- 🟢 Write just enough code to get that single test to **pass**
- Run all tests
- 🟡 (Refactor) Improve the initial code while keeping the tests green Repeat

## Approaches

### Inside Out (Detroit School of TDD or Classicist)
- The focus is on the results (or state).
- Testing begins at the smallest unit level.
- Design happens at the refactor stage, which can unfortunately result in large refactorings.

### Outside In (London School of TDD or Mockist)
- Focuses on user behavior.
- Testing begins at the outer-most level.
- Relies heavily on mocking and stubbing external dependencies.
- Design happens at the red stage.

**Outside In** approach also tends to work better with front-end applications since the code is so close to the end-user.

> [What is Test-Driven Development?](https://testdriven.io/test-driven-development/#:~:text=Test%2DDriven%20Development%20(TDD),It%20combines%20building%20and%20testing.)

## Extends test from note part 1

In note part 1, we have several tests based on the code we've written already, what if we want to implement additional feature for example, we want to clear input fields after user submitting the form, we can have 2 different approaches:

1. Implement clear input fields in component directly and write test to check result.
2. Write test first, then implement clear input fields afterwards.

With the concept of test-driven development, let's try to implement approach 2 and we should be expected the test failed.

// UserForm.test.js

test('Clear inputs when from is submitted', () => {
	render(<UserForm onUserAdd={() => {}} />);

	// grab roles
	const nameInput = screen.getByRole('textbox', { name: /name/i });
	const emailInput = screen.getByRole('textbox', { name: /email/i });
	const button = screen.getByRole('button');

	// Simulating user behavior
	user.click(nameInput);
	user.keyboard('Andy');
	user.click(emailInput);
	user.keyboard('[e-mail]');

	user.click(button);

	// assertions
	expect(nameInput).toHaveValue('');
	expect(emailInput).toHaveValue('');
});


Now we know that before clearing inputs, the test would fail as expected, let's implement feature in `<UserForm/>` to see if the test pass.

// UserForm.js

function UserForm({ onUserAdd }) {
	const [email, setEmail] = useState('');
	const [name, setName] = useState('');

	const handleSubmit = (event) => {
		event.preventDefault();

		onUserAdd({ name, email });
		setName('');
		setEmail('');
	};
    
    return (
     ...
    )
}

Once we added `setName('')` and `setEmail('')`, our test is passed.