component unit testing in Glimmer

Question

For classic component unit tests, how would we migrate this to Glimmer? This component unit test is testing a local prop that is not exposed to the user.

const component = this.owner
  .factoryFor('component:some-component')
  .create({
    someModel: { foo: 'bar' }
  });

assert.equal(component.get('someLocalProp'), false);

Answer 1

These are indeed an anti-pattern! Indeed, unit testing components is an anti-pattern in general: you're not actually testing the interface of the component that way. Here's what I mean by that: all interactions with the component, both as another developer invoking it and as a user interacting with it, happen via the template. "Unit" testing it like this does not represent how either the end user or the other developers who invoke it will be able to interact with it.

Most of the time, tests like this exist because a developer wanted to check the behavior of an internal method or getter. However, that's exactly the opposite of what we should do when testing. We only want to test the public contract: that's what allows us to actually do the work of refactoring: that is, changing the internal implementation without changing the public contract. Tests which rely on internal behavior are necessarily over-coupled and fragile. In the case of UI components, that means that "unit" tests like this are effectively always over-coupled and fragile.

For example, if a getter isn't visible in the template directly, who cares whether it computes a given value or not? We really only care about the result of the computation.

There's no directly-corresponding API for Glimmer components, partly for that reason. The right pattern here is to rewrite the component test into an integration test, which does allow you to test the actual interface of the component (or to remove it if it's not providing actual value).