Leonardo Galani
Sep 18 · 4 min read
apollo 11 launch :) huE

Para esse tutorial usarei padrão ES6 do javascript, mas você pode adaptar o código para typescript se o projeto que vc estiver usa esse padrão.

Eu adotei a nomenclatura "end to end" para esse tipo de teste pois não vamos usar mock's ou snapshots de queries. Poderíamos também chamar esses testes de aceitação… Its up to you.


Install all the things!

Nesse exemplo usarei npm , mas pode usar yarn.

npm install apollo-boost graphql-tag jest — save

O pacote apollo-boost é uma coleção de dependências que te ajuda a colocar seu client para rodar relativamente rápido. Para maiores informações sobre ele: https://www.apollographql.com/docs/react/essentials/get-started/#apollo-boost

Setup

Antes de escrever os testes, vamos criar o arquivo de configuração do jest.

Crie um arquivo chamado jest_e2e.config.js na raiz do seu repositório para dizer ao jest onde se encontra os arquivos de teste.

module.exports = {
rootDir: "e2e-test/",
verbose: true,
};

Existe outra maneira de fazer isso (https://jestjs.io/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner) porém o que vou mostrar aqui, na minha opinião, é simples, fácil de entender e menos invasivo em um repositório já existente.

Feito isso, vamos adicionar um script no seu package.json para poder rodar os testes de forma mais simples:

{
"private": true,
"name": "meu-repo-de-teste",
"repository": {
(...)
},
"version": "1.0.0",
"scripts": {
"e2e:jest": "jest --config ./jest_e2e.config.js",
},

Dessa forma podemos chamar nossa suite de teste via linha de comando digitando npm run e2e:jest ou yarn e2e:jest , dependendo como está configurado seu projeto.


Organizando seus arquivos

Vamos criar a seguinte estrutura:

Dentro do nosso diretório e2e-tests temos 2 diretórios, um que vai armazenar nossas queries e um que vai conter os testes de fato.

Para quem esta familiarizado com rspec, o jest trabalha de uma forma similar ao procurar arquivos de teste dentro de um diretório específico. No caso do jest, o padrão é __tests__ mas isso pode ser alterado via configuração.

Como estamos fazendo testes e2e, é melhor ter um lugar para armazenar as queries, mas vc pode definir elas no começo do teste se achar melhor.


Configurando Apollo Client

Existem outros clientes para graphql por ai e eu não tenho propriedade para dizer qual é melhor. O Apollo client pra mim até agora está atendendo bem as necessidades.

const ApolloClient = require("apollo-boost").default;const apolloGraphQLClient = (accountDetails) => {
const credentials = Buffer.from(
`${accountDetails.email}:${accountDetails.password}`
).toString("base64");
return new ApolloClient({
uri: accountDetails.url,
fetch: fetch,
request: (operation) => {
operation.setContext({
headers: {
Authorization: `Basic ${credentials}`,
},
});
},
});
};
module.exports = { apolloGraphQLClient };

Basicamente aqui estamos configurando o apollo-client com basic auth base64, mas no seu caso pode ser por token, etc.

Configurando seu arquivo de queries

Para escrever as queries, vamos usar o pacote graphql-tag que nada mais é que um parser de queries para graphql. https://github.com/apollographql/graphql-tag

const gql = require("graphql-tag");const listQuery = gql`
{
myList {
edges {
node {
id
name
}
}
}
}
`;
module.exports = { listQuery }

Escrevendo os testes

Mais uma vez, se você já tem familiaridade com rspec, o jest tem uma DSL para estruturar seu código com describe > context > test

const { apolloGraphQLClient } = require("../client-setup");
const { listQuery } = require("../queries/my-queries");
let client;const accountDetails = {
email: "user@email.com",
password: "password",
url: "https://yadayada.com/graphql",
};
describe("Minha feature", () => {
beforeAll(() => {
client = apolloGraphQLClient(accountDetails);
});
test("exemplo de teste", async () => {
const example = await client.query({
query: listQuery,
});
expect(example).toBeTruthy();
});
});

Eu acho que esse código é simples o suficiente para você entender como funciona a estrutura do jest.

Se você não esta familiarizado com funções assíncronas, dê uma lida nesse post: https://medium.com/@alcidesqueiroz/javascript-ass%C3%ADncrono-callbacks-promises-e-async-functions-9191b8272298

Para maiores informações sobre matchers do jest, fica aqui 2 links com o resumo de tudo que vc precisa saber:

Mas você esqueceu "mutations" amigo..

Desculpa ai champs… da uma olhada nesse link aqui: https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.mutate

Seguindo o exemplo anterior, você pode fazer algo assim:

const response = await client.mutate({
mutation: createMutatiton,
variables: { foo: 'bar' },
});

Agora é só rodar jest --config ./jest_e2e.config.js ou a referência que a gente criou no package.json e correr para o abraço :)

assert(QA)

Best practices, quality assurance, software engineering, career and more

Leonardo Galani

Written by

assert(QA)

Best practices, quality assurance, software engineering, career and more

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade