Учитывая, насколько свободно связана веб-разработка в наши дни, что приводит к разделению интерфейса (в основном SPA) и Backend (API) наших приложений и часто обрабатывается разными командами, одна серьезная вещь, которую нужно учитывать, это «Заблокированный фактор».
Заблокированный коэффициент заключается в том, как долго разработчик проводит ожидание внешних зависимостей API, поэтому предотвращает вообще разработку функций на передней части или в проекте. Издевание – это выход из этого заблокированного фактора. Их легко писать, гибкие, и без гражданства (следовательно, сценарии тестирования неоднократно проще) и в конечном итоге обеспечивают выход из внешних зависимостей API.
Издевание позволяет нам симулировать API Backend, указав конечные точки и ответы, которые он дает.
Издевательства
В этой статье я бы продемонстрировал, как использовать MSW (Mock Server Worker) для Mock API для приложения React Action.
Mock Service Shot – это библиотека издевательства API, которая использует API сервисного работника для перехвата фактических запросов. – Mswjs.io.
N.B: MSW – это полностью структура Agnostic, а также поддерживает GraphQL. Вам стоит это увидеть!
Давайте начнем!
Нам нужно установить MSW.
$ npm install msw --save-dev # or $ yarn add msw --dev
Далее было бы создание издеваний. Я делаю разделяющие действия API, такие как создание, чтение, e.t.c с самих серверов издевательства только для удобства.
Давайте сделаем это.
[ { "id": "BJSON65503", "todo": "Write a new article", "completed": false }, { "id": "BJSON44322", "todo": "Work on side project", "completed": true } ]
Тестовый образец данных TODO. Мы могли бы использовать Fakers также.
import todosData from './todoDB.json' let todos: ITodo[] = [...todosData] export interface ITodo { id: string todo: string completed: boolean } export interface TodoUpdate { todo?: string completed?: boolean } export interface TodoUpdate { todo?: string completed?: boolean } async function create(todo: ITodo): Promise{ todos.push(todo) return todo } async function readAll(): Promise { return todos } async function read(todoId: string): Promise { return todos.find(todo => todo.id === todoId) } async function update( id: string, update: TodoUpdate, ): Promise { todos.forEach(todo => { if (todo.id === id) { return {...todo, update} } }) return await read(id) } async function deleteTodo(todoId: string): Promise { return todos.filter(todo => todo.id !== todoId) } async function reset() { todos = [...todosData] } export {create, read, deleteTodo, reset, update, readAll}
Действия API
Мы можем создать нашу макет сейчас.
Если вы знакомы с экспресс-структурой Node.js, способ написания одежды Mode API с MSW аналогичен.
import {setupWorker, rest} from 'msw' import * as todosDB from '../data/todo' interface TodoBody { todo: todosDB.ITodo } interface TodoId { todoId: string } interface TodoUpdate extends TodoId { update: { todo?: string completed?: boolean } } const apiUrl = 'https:todos' export const worker = setupWorker( rest.get(`${apiUrl}/todo`, async (req, res, ctx) => { const {todoId} = req.body const todo = await todosDB.read(todoId) if (!todo) { return res( ctx.status(404), ctx.json({status: 404, message: 'Book not found'}), ) } return res(ctx.json({todo})) }), rest.get(`${apiUrl}/todo/all`, async (req, res, ctx) => { const todos = await todosDB.readAll() return res(ctx.json(todos)) }), rest.post (`${apiUrl}/todo`, async (req, res, ctx) => { const {todo} = req.body const newTodo = await todosDB.create(todo) return res(ctx.json({todo: newTodo})) }), rest.put (`${apiUrl}/todo/update`, async (req, res, ctx) => { const {todoId, update} = req.body const newTodo = await todosDB.update(todoId, update) return res(ctx.json({todo: newTodo})) }), rest.delete (`${apiUrl}/todo/delete`, async (req, res, ctx) => { const {todoId} = req.body const todos = await todosDB.deleteTodo(todoId) return res(ctx.json({todos: todos})) }), )
Работник сервера используется для издевательства на стороне клиента со всеми конечными точками остальных
Выше мы определили все apis остальных apis с их ответами, и если вы заметите, наши конечные точки покоя все указывают на сервер HTTPS (префикс APIURL). Это связано с тем, что служебные работники должны подаваться через https и не http (всегда отмечайте что). Мы могли бы прикрепить статус ответа, JSON, E.t.co, который отлично и похоже на то, как наши API обычно ведут себя нормально.
Setupworker или обработчик еще не начался; Следовательно, API сервисного работника не перехватит запроса.
Мы начнем работник в режиме разработки, потому что мы не хотим бить макет в производстве или даже постановку.
Давайте сделаем это
if (process.env.NODE_ENV === 'development') { const {worker} = require('./dev-server') console.log(worker) worker.start() } export {}
Все, что нам нужно сделать, это импортировать вышеуказанный файл в точку входа нашего приложения.
//index.ts import './server'
Теперь, когда мы начнем наше приложение React, мы должны увидеть следующее в консоли браузера.
Потрясающий!
Если мы сделаем запрос API на “/todo/all” Конечная точка и посмотрите на вкладку Network, мы увидим реальный запрос и соответствующий ответ, обслуживаемый API сервисного работника.
Мы также получим Тодос с нашего ToDodb.json в качестве наших данных реагирования.
Это здорово, так как у нас нет нашей боковой части и гораздо больше; Мы не испытываем никакой блокировки в нашем процессе разработки в качестве разработчиков Frontend.
Одним из основных проблем, касающихся использования издеваний, является техническое обслуживание, поскольку поведение Backeng может быстро измениться, и мы должны поддерживать издевательства. Это действительная точка, но если мы собираемся писать тесты (мы сделаем во второй части этой статьи) для этих потреблений API на Frontend, нам все равно нужно будет поддерживать нашими издевательствами, учитывая, что наши пользователи не будут смешивать Или аксиос, следовательно, наш тест не должен также, что, если есть способ поделиться обработчиками между сервером Dev, и тестовый сервер, следовательно, поддерживает только один обработчик и действия API.
Мы рассмотрим силу MSW гораздо больше в следующей статье.
Спасибо за чтение.
Оригинал: “https://dev.to/wati_fe/mocking-apis-for-frontend-developers-ig4”