React · Theory

Unit Testing in React

Theory

61/94

Unit Testing in React

React Testing Library: render(<Comp />), screen.getByRole / getByText, userEvent.click, assert the text/role the user sees. Jest or Vitest runs it. Test behaviour, not implementation (not wrapper.state(), not CSS class internals).

Example: Counter — click Increment, expect ‘1’ on screen. That’s a unit-style component test. MSW mocks network. Don’t snapshot the entire HTML of a page as your only test.

Unit Testing in React — output — render / click / assert text. Don’t test implementation details like state keys.

Exam tip

RTL render + userEvent + assert text.

Example

// RTL idea
console.log("render(<Counter />)");
console.log("click / increment");
console.log('expect(screen.getByText("1")).toBeInTheDocument()');

Unit Testing in React — output: render / click / assert text. Don’t test implementation details like state keys.

Short notes

Lib : RTL + Vitest/Jest.
Ruleuser behaviour, not internals.
Exclick → text on screen.

React · Theory

Unit Testing in React

← All stacks

Theory

61/94

Unit Testing in React

Example: Counter — click Increment, expect ‘1’ on screen. That’s a unit-style component test. MSW mocks network. Don’t snapshot the entire HTML of a page as your only test.

Unit Testing in React — output — render / click / assert text. Don’t test implementation details like state keys.

Exam tip

RTL render + userEvent + assert text.

Example

// RTL idea
console.log("render(<Counter />)");
console.log("click / increment");
console.log('expect(screen.getByText("1")).toBeInTheDocument()');

Unit Testing in React — output: render / click / assert text. Don’t test implementation details like state keys.

Short notes

Lib : RTL + Vitest/Jest.
Ruleuser behaviour, not internals.
Exclick → text on screen.

Unit Testing in React

Example

Short notes

Questions

Unit Testing in React

Example

Short notes

Questions