expect.extend, criando suas próprias validações no JEST

[Marcel Blasque Ribeiro]

Olá Dev, seja bem-vindo!

Vamos aprender sobre Expect no Jest

A função expect no Jest é utilizada sempre que você deseja testar um valor. Aqui está uma visão geral:

• expect(valor): Esta é a função principal usada para criar uma “expectativa” sobre um certo valor nos seus testes.
• Modificadores: .not, .resolves, .rejects podem inverter os matchers ou lidar com promessas.
• Matchers: Funções como .toBe(valor), .toEqual(valor), .toContain(item) são usadas para afirmar algo sobre o valor.

Você raramente usará expect sozinho. Em vez disso, você usará expect com uma função “matcher” para afirmar algo sobre um valor. Por exemplo, se você tem um método melhorSabor() que espera retornar a string ‘morango’, você poderia testar assim:

test('o melhor sabor é morango', () => {
  expect(melhorSabor()).toBe('morango');
});

Neste caso, toBe é a função “matcher”. Existem muitas funções “matcher” diferentes para ajudá-lo a testar coisas diferentes. O argumento para expect deve ser o valor que seu código produz, e qualquer argumento para o matcher deve ser o valor correto esperado.

Para mais informações, você pode consultar a documentação do Jest

Em nosso dia a dia, podemos nos deparar com situações em que apenas os matcher pré-definidos pelo Jest não são suficientes, o que gera muitas vezes duplicidade de código e agrega complexidade desnecessária nos testes. Para contornar essa situação, você pode usar expect.extend e adicionar seus próprios "matchers" no Jest. Por exemplo, vamos utilizar nosso exemplo acima criando nossa própria validação: 

• vamos criar na raiz do nosso projeto um arquivo js para centralizar nossos matchers personalizados

Para uma organização coesa do projeto, criei a pasta utils. Dentro desta pasta, encontra-se o arquivo dedicado à implementação dos matchers.

• Aqui está uma dica para incluir nossa implementação globalmente no Jest e evitar a necessidade de importar sempre o nosso arquivo jest.extends.js. 

Em package.json vamos adicionar o código abaixo:

"jest": {
    "setupFilesAfterEnv": [
      "./utils/jest.extends.js"
    ]
  }

Para mais informações, você pode consultar Configuring Jest

agora vamos criar nosso matcher em jest.extends.js

expect.
    extend({
      async isMatch(received, valorEsperado, errorMessage) {
        if (await received.match(valorEsperado)) {
          return { pass: true };
        } else {
          return {
            message: () => errorMessage,
            pass: false,
          };
        };
      }
    });

utilizando nosso matcher

test('o melhor sabor é morango', () => { 
	await expect('banana').isMatch('morango', 'Esse não é o melhor sabor'); 
});

Análise do código

Criamos nosso matcher isMatch que recebe três parâmetros: o primeiro é o valor que será avaliado, o segundo é o valor esperado para a comparação, e o terceiro é uma mensagem de erro que será exibida se a validação não for bem-sucedida.

Para criar um novo matcher:

expect.
    extend({
      async isMatch(received, valorEsperado, errorMessage) {
        if (await received.match(valorEsperado)) {
          return { pass: true };
        } else {
          return {
            message: () => errorMessage,
            pass: false,
          };
        };
      },
        async isFalse(received, errorMessage) {
            if (received) {
                return { pass: false };
            } else {
                return {
                    message: () => errorMessage,
                    pass: true,
                };
            };
        }
    });