Understanding stubs in testing

A is a simple, static object that is used to provide predictable responses to method calls. It is typically used to replace a that is not directly related to the functionality being tested, but is required for the test to run.

Wait, what? Yea, we need an example to understand this.

Examples of stubs

Imagine the situation when you have already component implemented. It takes several properties and some of them are required. You want to test displaying feature and be able to detect bugs without any in-depth checks.

it('allows to pass custom placeholder', () => { const propsStub: SelectProps = { options: [], onChange: () => {} }; // You'll test only placeholder but you need // to pass options and onChange to make TypeScript calm. render( <Select {...propsStub} placeholder="placeholder" /> ); screen.getByText(/placeholder/); });

Congrats! You've created your first stub, but why you needed that?

The will scream that there are missing properties: and . You can cast it to , but it's wrong solution. Why you need TypeScript if you want to disable type-checking?

Next problem is on side. What will happen when select component will try to access initially of the required properites but they will be ? That's right... Big bum 🔥.

That's exactly why you need stubs!

Now you know what stubs are for. It's not a concept only related with React components or React testing. This approach is universal and completely independent from the technology you are working in - just like principles.

You can stub , and others just to be able to test one dedicated part of something bigger.

If you enjoyed it, be sure to visit us on where we regularly upload content from programming.