#VemProReact #JEP #11
#VemProReact
Correção da atividade!
yarn upgrade-interactive...
"collectCoverageFrom": [
"src/**/*.js",
"!src/dev/**",
"!src/**/*.styles.js",
"!src/lib/services/graphql/**",
"!src/lib/setupTests.js"
]
...package.json
#VemProReact
Correção da atividade!
...
let props;
describe('LotacaoPrincipal component', () => {
beforeEach(() => {
props = {
foro: {}
};
});
test('Should renders the component', () => {
const { container } = render(<LotacaoPrincipal {...props} />);
expect(container).toBeDefined();
});
});LotacaoPrincipal.test.js
#VemProReact
Correção da atividade!
...
test('Should renders the component', () => {
...
test('Should renders the component with options', async () => {
...
test('Should renders the component with value', () => {
...
test('Should handle input change', async () => {
...
test('Should handle option change', async () => {
...SelectCargo.test.js
#VemProReact
Correção da atividade!
...
test('Should renders the component with Auth', async () => {
const { container, queryByText } = render(
<MockedProvider mocks={mocks} addTypename={false}>
<ToastProvider maxSnack={3}>
<Dados {...props} />
</ToastProvider>
</MockedProvider>
);
await wait(0);
const button = queryByText('SAVE');
expect(container).toBeDefined();
expect(button).not.toBeNull();
});
...Dados.test.js
#VemProReact
Correção da atividade!
...
test('Should execute callback function', () => {
...
test('Should execute callback function after default wait', () => {
...debounce.test.js
#VemProReact
Correção da atividade!
#Desafio!
https://git-unj.softplan.com.br/vemproreact-jep/vemproreact-jep => aula-10-desafio

#VemProReact
__mocks__
- Pasta criada para colocar os mocks dos testes
- Criamos uma pasta __mocks__ na raiz do projeto
- Queries / Mutations response
- REST response
- Props default values
Referências para estudos:
#VemProReact
paths
O problema:
import { GET_SOMETHING } from '../../../../services/graphql/queries';import { MOCK_SOMETHING } from '../../../../../__mocks__/apollo/something';#VemProReact
paths
A solução:
{
"compilerOptions": {
"baseUrl": "src/lib"
}
}jsconfig.json
"jest": {
"moduleNameMapper": {
"^lib(.*)$": "<rootDir>/src/lib$1",
"^__mocks__(.*)$": "<rootDir>/__mocks__$1"
}
}package.json
import { GET_SOMETHING } from 'services/graphql/queries';import { MOCK_SOMETHING } from '__mocks__/apollo/something';#VemProReact
data-testid
Referências para estudos:
https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change
- Criado para dar um id para o elemento
- Evita que os testes quebrem por alterações strings ou de CSS, por exemplo
- Facilita a automatização dos testes E2E
#VemProReact
Defects
#VemProReact
Fluxo GitLab
- Baixar o projeto na versão correta
- Criar uma branch com o nome fix/NUMERO_DEFECT
- Corrigir o erro e fazer os commits
- Abrir um MR da sua branch para a branch original
Referências para estudos:
#VemProReact
Dúvidas?
#VemProReact
Atividade!
- Clonar o repositório das aulas (branch: aula-11)
- Criar uma branch fix/123456-{NOME}-{SOBRENOME}
- Renomear os arquivos index.js (components) para NomeDoComponent.js e criar um novo index.js que vai importá-lo e exportá-lo como default
- Mover os mocks dos testes para a pasta __mocks__ seguindo uma estrutura lógica/domínio
- Configurar o jsconfig.json / moduleNameMapper e resolver todos os imports
- Adicionar data-testid aos elementos e substituir todos os getByText e queryByText
- Abrir um MR para a branch aula-11 e marcar Daniel Xavier como Assignee
#VemProReact
Obrigado!

#VemProReact #JEP #11
By Softplan Planejamento e Sistemas
#VemProReact #JEP #11
__mocks__; paths; data-testid; Defects; GitLab workflow
- 380