Instalação do MSW para trabalhar com o backend no Redux

Nas lições anteriores, fizemos algumas modificações adicionais em nossa aplicação. Agora precisamos lidar com o servidor com o qual nossa aplicação irá se comunicar.

Não teremos um servidor real, então vamos simular a interação com ele usando uma ferramenta incrível: Mock Service Worker. O Mock Service Worker (MSW) é uma ferramenta de mock de API que usa a API padronizada do Service Worker, projetada para interceptar solicitações em nível de rede. O MSW irá gerar respostas fictícias (responses) para as nossas solicitações (requests). Além disso, como afirmam os desenvolvedores, a ferramenta é tão eficaz e flexível que, após depurar com os mocks (para os quais nada especial precisa ser criado na aplicação), a aplicação pode ser colocada em produção com um servidor externo real. A documentação é bastante extensa e, se você se interessar pelo MSW, pode lê-la no site oficial.

Vamos prosseguir com a instalação do msw. Para isso, abra nosso projeto de produtos e no terminal, digite:

npm install msw --save-dev

Para o msw funcionar, também precisamos criar e copiar mockServiceWorker.js para algum diretório público. Muitas vezes é a pasta public. Nós temos uma pasta public vazia, vamos copiar o arquivo para lá. Para isso, execute no terminal o comando e depois aceite o uso da pasta public:

npx msw init public

Agora, vamos verificar a pasta public; lá deve aparecer o script gerado mockServiceWorker.js. Agora inicie nossa aplicação de produtos e na barra de endereços do navegador, digite http://localhost:5173/mockServiceWorker.js (já que nossa aplicação está rodando na porta 5173). Você vê o conteúdo do arquivo mockServiceWorker.js exibido na janela do navegador? Se sim, ótimo, vamos em frente.

A seguir, vamos criar uma pasta api dentro da pasta src, e dentro dela um arquivo server.js, onde escreveremos o código do servidor. Agora, abra server.js e importe a função setupWorker da biblioteca msw instalada:

import { setupWorker } from 'msw/browser'

Abaixo no arquivo, vamos criar a variável worker e exportá-la:

export const worker = setupWorker()

E agora, vamos abrir o arquivo main.jsx e importar nosso worker:

import { worker } from './api/server'

Agora, vamos conectá-lo à nossa aplicação. Para isso, vamos envolver o código que usamos para criar a raiz de nossa aplicação React em uma função, vamos chamá-la de main e adicionar, como primeira linha, a função de inicialização do worker. Claro, não vamos esquecer de chamar a própria função main. O código completo, após todas as linhas de importação, ficará assim:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

Agora temos certeza de que nossa aplicação não começará a funcionar (e enviar solicitações ;) ) antes do worker ser iniciado.

Vamos iniciar nossa aplicação e abrir o console do navegador para desenvolvedores. Se você vir o texto '[MSW] Mocking enabled.' lá, você fez um ótimo trabalho e instalou tudo corretamente!!!

Abra sua aplicação de estudantes. Tendo revisado o material desta lição, instale o Mock Service Worker para sua aplicação.

Crie o arquivo server.js e, dentro dele, crie um worker. Conecte o worker à aplicação no arquivo main.js, conforme mostrado na lição. Certifique-se de que tudo está funcionando.