A while ago I wanted to create unit (jest) and system tests (detox) for an app I had been maintaining, after a while I saw that I was repeating myself a lot across both tests suits (and also in each test suits). After changing some components around and breaking tests a lot, I came up with a solution that I called ‘descriptor pattern’, which is essentially a thin reusable DSL for your own pages. Here I describe how I've been doing it.

The problem

Lets just get to the code. Suppose you have a unit test like this:

// Unit test on jest
describe('MyAlertComponent', () => {
  it('renders the title somewhere', () => {
    const props = mockProps();
    const screen = renderWithProps(mockProps);

    expect(**screen.findByTestID('Title')**).toHaveText(props.title);
  });
});

Its pretty nice, works and focused on the problem like almost all unit tests should be. After writing that one, you need to use that component else where right? you add it, and then include a system test to make sure the user will see it:

// System test on detox
import { screen } from 'detox'; // something like this

describe('My Screen', () => {
  it('renders an error when error response happens', () => {
    const requests = mockRequests();
    openMyScreen();

    const requests = mockRequests({ error: true });

    screen.findByTestID('MyScreenList').dragDown();

    expect(
      screen.findByTestID('MyAlertComponent')**.findByTestID('Title')**
    ).toHaveText('An error ocurred!');
  });
});

Now, when new stuff come in and you need to add and test for more properties

After a while, you will notice that you end up with a lot of the same structure queries being repeated

One solution

If you're bothered by all of this stuff being repeated, you can start using the descriptor pattern

The idea is pretty simple: you create a namespace and use the available API/DSL to describe your page selectors