I have a code as following:

describe("Dynamic testing fields validations", () => {
        it.each`
          field         | value             | expectedMessage
          ${"username"} | ${""}             | ${"username is not allowed to be empty"}
          ${"username"} | ${"b".repeat(4)}  | ${"username length must be at least 5 characters long"}
          ${"username"} | ${"b".repeat(21)} | ${"username length must be less than or equal to 20 characters long"}
          ${"email"}    | ${""}             | ${"email is not allowed to be empty"}
          ${"email"}    | ${"mailcom"}      | ${"email must be a valid email"}
          ${"password"} | ${""}             | ${"password is not allowed to be empty"}
        `(
          `return $expectedMessage when $field is ${"$value"} === "" ? "${"empty"}" : "$value" characters long`,
          async ({ field, expectedMessage, value }) => {
            user.username = value;
            user.password = value;
            user.email = value;

            const res = await exec();

            const {
              validationErrors: { details },
            } = res.body;

            const result = Object.assign({}, ...details);

            expect(result[field]).toBe(expectedMessage);
          }
        );
      });

I'm receiving the following error :

This condition will always return 'false' since the types '"$value"' and '""' have no overlap when I do the conditional check in the ternary operator.

I have tried everything but without success. Can a good soul give me an indication of how to fix this and why I'm receiving this error ?