Please explain this syntax to me

Programming TypeScript
1

I just came across this code snippet:

  describe.each`
    isMacOS  | isRemote
    ${true}  | ${false}
    ${false} | ${true}
  `('when isMacOS = $isMacOS and isRemote = $isRemote', ({ isMacOS, isRemote }) => {
    beforeEach(() => {
      jest.mocked(getEnvInfo).mockReset().mockReturnValueOnce({ isMacOS, isRemote });
    });

I do understand what it does, but do not know how to call / find this kind of syntax: each`table of data`(...). It looks so nice. Is that standard TypeScript? Or some jest magic I cannot have at home?

2

It’s standard TypeScript (and JavaScript) syntax for template literals, called a tag function.

function pad(str) {
  return " " + str + " "
}

pad`-` // Same thing as pad(`-`)
1 Like
3

Wow, thanks a lot! Tagged templates, I never heard of that before.

The trick is, that there is a function describe.each() that gets invoked with a set of strings and values parsed out of the Template literal. And whatever it returns is then invoked using the parameters given.

So in fact the table style is some jest magic, but the syntax is not. I think I have something to try out…

4

We actually use what @SneakyMallard described in the javascript-analyzer. You may find that interesting.

5

Indeed, very interesting! I think I have much to learn about TypeScript generic typing and such, too…

2 Likes