Testing 101: What are implementation details?

'Implementation details' is one of a few terms you are likely to see if, like me, you are researching approaches to testing in React. Knowing what they are and why you probably want to avoid them can be helpful when trying to understand what you do want to test.

According to Kent Dodds (the creator of React Testing Library)

Implementation details are things which users of your code will not typically use, see, or even know about.

This could be, for example, some internal state in your component.

// a pattern resembling this in React

const [state, useState] = useState('initial state')

Implementation details can be contrasted with application behaviour. Application behaviour is essentially what your application does. For example, the click of a button triggering a form submission.

Although application behaviour relies on a functional implementation, the end user doesn't need to know anything about these implementation details to use the app. This is a key point: implementation details may change where application behaviour remains consistent. The behaviour of your application is ultimately what impacts the user, so it follows that tests should prioritise this.

Implementation details are brittle

Why does this matter? Tests that include the names of state variables and other implementation details, are incredibly brittle. This means that they cause your tests to break easily, even if your application code still works.

For example, if you were to refactor your code and change the name of a state variable, an associated test that used the previous name would break, even though the behaviour of your app was the same.

See this section of the React Testing Library docs for more examples of implementation details to avoid using when writing tests.