[{"data":1,"prerenderedAt":896},["ShallowReactive",2],{"page:\u002Fextensions\u002Fkubb-labs\u002Fplugin-msw\u002Fguides\u002Fmock-api":3},{"id":4,"frontmatter":5,"title":6,"heading":6,"body":7,"path":895,"source":4},"extensions\u002Fkubb-labs\u002Fplugin-msw\u002Fguides\u002Fmock-api.md",{},"Mock API responses",{"type":8,"value":9,"toc":885},"minimark",[10,14,19,35,260,268,272,279,372,376,393,560,571,575,588,709,720,724,734,800,811],[11,12,13],"p",{},"Configure generated MSW handlers and register them in tests or a browser worker.",[15,16,18],"h2",{"id":17},"generate-typed-handlers","Generate typed handlers",[11,20,21,22,26,27,30,31,34],{},"Add ",[23,24,25],"code",{},"pluginTs"," and ",[23,28,29],{},"pluginMsw"," to your configuration. The default ",[23,32,33],{},"parser: 'data'"," creates handlers whose response data you supply.",[36,37,42],"pre",{"language":38,"filename":39,"code":40,"class":41},"typescript","kubb.config.ts","import { defineConfig } from 'kubb\u002Fconfig'\nimport { pluginTs } from '@kubb\u002Fplugin-ts'\nimport { pluginMsw } from '@kubb\u002Fplugin-msw'\n\nexport default defineConfig({\n  input: '.\u002FpetStore.yaml',\n  output: { path: '.\u002Fsrc\u002Fgen' },\n  plugins: [\n    pluginTs(),\n    pluginMsw({ output: { path: 'handlers', mode: 'directory' }, baseURL: 'http:\u002F\u002Flocalhost:3000', handlers: true }),\n  ],\n})","highlights",[23,43,45,72,73,72,89,72,105,72,107,72,122,72,139,72,163,72,175,72,187,72,247,72,256],{"class":44},"language-typescript",[46,47,50,54,58,62,65,68],"span",{"class":48,"style":49},"line","display: inline",[46,51,53],{"style":52},"color:#d73a49;--hls-dark:#f97583","import ",[46,55,57],{"style":56},"color:#005cc5;--hls-dark:#79b8ff","{ ",[46,59,61],{"style":60},"color:#24292e;--hls-dark:#e1e4e8","defineConfig ",[46,63,64],{"style":56},"} ",[46,66,67],{"style":52},"from ",[46,69,71],{"style":70},"color:#032f62;--hls-dark:#9ecbff","'kubb\u002Fconfig'","\n",[46,74,75,77,79,82,84,86],{"class":48,"style":49},[46,76,53],{"style":52},[46,78,57],{"style":56},[46,80,81],{"style":60},"pluginTs ",[46,83,64],{"style":56},[46,85,67],{"style":52},[46,87,88],{"style":70},"'@kubb\u002Fplugin-ts'",[46,90,91,93,95,98,100,102],{"class":48,"style":49},[46,92,53],{"style":52},[46,94,57],{"style":56},[46,96,97],{"style":60},"pluginMsw ",[46,99,64],{"style":56},[46,101,67],{"style":52},[46,103,104],{"style":70},"'@kubb\u002Fplugin-msw'",[46,106],{"class":48,"style":49},[46,108,109,112,115,119],{"class":48,"style":49},[46,110,111],{"style":52},"export ",[46,113,114],{"style":52},"default ",[46,116,118],{"style":117},"color:#6f42c1;--hls-dark:#b392f0","defineConfig",[46,120,121],{"style":56},"({",[46,123,124,127,130,133,136],{"class":48,"style":49},[46,125,126],{"style":56},"  ",[46,128,129],{"style":56},"input",[46,131,132],{"style":52},": ",[46,134,135],{"style":70},"'.\u002FpetStore.yaml'",[46,137,138],{"style":52},",",[46,140,141,143,146,148,150,153,155,158,161],{"class":48,"style":49},[46,142,126],{"style":52},[46,144,145],{"style":56},"output",[46,147,132],{"style":52},[46,149,57],{"style":56},[46,151,152],{"style":56},"path",[46,154,132],{"style":52},[46,156,157],{"style":70},"'.\u002Fsrc\u002Fgen' ",[46,159,160],{"style":56},"}",[46,162,138],{"style":52},[46,164,165,167,170,172],{"class":48,"style":49},[46,166,126],{"style":52},[46,168,169],{"style":56},"plugins",[46,171,132],{"style":52},[46,173,174],{"style":56},"[",[46,176,177,180,182,185],{"class":48,"style":49},[46,178,179],{"style":56},"    ",[46,181,25],{"style":117},[46,183,184],{"style":56},"()",[46,186,138],{"style":52},[46,188,189,191,193,196,198,200,202,204,206,209,212,215,217,220,222,224,227,229,232,234,237,239,242,245],{"class":48,"style":49},[46,190,179],{"style":52},[46,192,29],{"style":117},[46,194,195],{"style":56},"({ ",[46,197,145],{"style":56},[46,199,132],{"style":52},[46,201,57],{"style":56},[46,203,152],{"style":56},[46,205,132],{"style":52},[46,207,208],{"style":70},"'handlers'",[46,210,211],{"style":52},", ",[46,213,214],{"style":56},"mode",[46,216,132],{"style":52},[46,218,219],{"style":70},"'directory' ",[46,221,160],{"style":56},[46,223,211],{"style":52},[46,225,226],{"style":56},"baseURL",[46,228,132],{"style":52},[46,230,231],{"style":70},"'http:\u002F\u002Flocalhost:3000'",[46,233,211],{"style":52},[46,235,236],{"style":56},"handlers",[46,238,132],{"style":52},[46,240,241],{"style":56},"true ",[46,243,244],{"style":56},"})",[46,246,138],{"style":52},[46,248,249,251,254],{"class":48,"style":49},[46,250,126],{"style":52},[46,252,253],{"style":56},"]",[46,255,138],{"style":52},[46,257,258],{"class":48,"style":49},[46,259,244],{"style":56},[261,262,264,265,267],"blockquote",{"as":263},"tip","For Node tests, set ",[23,266,226],{}," to the URL your client calls so MSW can match absolute requests. Browser handlers can use relative paths for the current origin.",[15,269,271],{"id":270},"supply-test-data","Supply test data",[11,273,274,275,278],{},"Call a generated handler with a response body or a callback that returns a ",[23,276,277],{},"Response",".",[36,280,283],{"language":38,"filename":281,"code":282,"class":41},"test-server.ts","import { setupServer } from 'msw\u002Fnode'\nimport { getPetByIdHandler } from '.\u002Fsrc\u002Fgen\u002Fhandlers\u002FgetPetByIdHandler'\n\nexport const server = setupServer(\n  getPetByIdHandler({ name: 'Rex', photoUrls: [] }),\n)",[23,284,285,72,301,72,317,72,319,72,338,72,367],{"class":44},[46,286,287,289,291,294,296,298],{"class":48,"style":49},[46,288,53],{"style":52},[46,290,57],{"style":56},[46,292,293],{"style":60},"setupServer ",[46,295,64],{"style":56},[46,297,67],{"style":52},[46,299,300],{"style":70},"'msw\u002Fnode'",[46,302,303,305,307,310,312,314],{"class":48,"style":49},[46,304,53],{"style":52},[46,306,57],{"style":56},[46,308,309],{"style":60},"getPetByIdHandler ",[46,311,64],{"style":56},[46,313,67],{"style":52},[46,315,316],{"style":70},"'.\u002Fsrc\u002Fgen\u002Fhandlers\u002FgetPetByIdHandler'",[46,318],{"class":48,"style":49},[46,320,321,323,326,329,332,335],{"class":48,"style":49},[46,322,111],{"style":52},[46,324,325],{"style":52},"const ",[46,327,328],{"style":60},"server ",[46,330,331],{"style":52},"= ",[46,333,334],{"style":117},"setupServer",[46,336,337],{"style":56},"(",[46,339,340,342,345,347,350,352,355,357,360,362,365],{"class":48,"style":49},[46,341,126],{"style":56},[46,343,344],{"style":117},"getPetByIdHandler",[46,346,195],{"style":56},[46,348,349],{"style":56},"name",[46,351,132],{"style":52},[46,353,354],{"style":70},"'Rex'",[46,356,211],{"style":52},[46,358,359],{"style":56},"photoUrls",[46,361,132],{"style":52},[46,363,364],{"style":56},"[] })",[46,366,138],{"style":52},[46,368,369],{"class":48,"style":49},[46,370,371],{"style":56},")",[15,373,375],{"id":374},"generate-mock-data","Generate mock data",[11,377,21,378,381,382,389,390,278],{},[23,379,380],{},"pluginFaker"," and change the MSW ",[383,384,386],"a",{"href":385},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-msw\u002Foptions#parser",[23,387,388],{},"parser"," to ",[23,391,392],{},"'faker'",[36,394,396],{"language":38,"filename":39,"code":395,"class":41},"import { pluginTs } from '@kubb\u002Fplugin-ts'\nimport { pluginFaker } from '@kubb\u002Fplugin-faker'\nimport { pluginMsw } from '@kubb\u002Fplugin-msw'\n\nconst plugins = [\n  pluginTs(),\n  pluginFaker(),\n  pluginMsw({\n    output: { path: 'handlers', mode: 'directory' },\n    baseURL: 'http:\u002F\u002Flocalhost:3000',\n    parser: 'faker',\n    handlers: true,\n  }),\n]",[23,397,398,72,412,72,428,72,442,72,444,72,455,72,465,72,475,72,483,72,511,72,523,72,535,72,548,72,556],{"class":44},[46,399,400,402,404,406,408,410],{"class":48,"style":49},[46,401,53],{"style":52},[46,403,57],{"style":56},[46,405,81],{"style":60},[46,407,64],{"style":56},[46,409,67],{"style":52},[46,411,88],{"style":70},[46,413,414,416,418,421,423,425],{"class":48,"style":49},[46,415,53],{"style":52},[46,417,57],{"style":56},[46,419,420],{"style":60},"pluginFaker ",[46,422,64],{"style":56},[46,424,67],{"style":52},[46,426,427],{"style":70},"'@kubb\u002Fplugin-faker'",[46,429,430,432,434,436,438,440],{"class":48,"style":49},[46,431,53],{"style":52},[46,433,57],{"style":56},[46,435,97],{"style":60},[46,437,64],{"style":56},[46,439,67],{"style":52},[46,441,104],{"style":70},[46,443],{"class":48,"style":49},[46,445,446,448,451,453],{"class":48,"style":49},[46,447,325],{"style":52},[46,449,450],{"style":60},"plugins ",[46,452,331],{"style":52},[46,454,174],{"style":56},[46,456,457,459,461,463],{"class":48,"style":49},[46,458,126],{"style":56},[46,460,25],{"style":117},[46,462,184],{"style":56},[46,464,138],{"style":52},[46,466,467,469,471,473],{"class":48,"style":49},[46,468,126],{"style":52},[46,470,380],{"style":117},[46,472,184],{"style":56},[46,474,138],{"style":52},[46,476,477,479,481],{"class":48,"style":49},[46,478,126],{"style":52},[46,480,29],{"style":117},[46,482,121],{"style":56},[46,484,485,487,489,491,493,495,497,499,501,503,505,507,509],{"class":48,"style":49},[46,486,179],{"style":56},[46,488,145],{"style":56},[46,490,132],{"style":52},[46,492,57],{"style":56},[46,494,152],{"style":56},[46,496,132],{"style":52},[46,498,208],{"style":70},[46,500,211],{"style":52},[46,502,214],{"style":56},[46,504,132],{"style":52},[46,506,219],{"style":70},[46,508,160],{"style":56},[46,510,138],{"style":52},[46,512,513,515,517,519,521],{"class":48,"style":49},[46,514,179],{"style":52},[46,516,226],{"style":56},[46,518,132],{"style":52},[46,520,231],{"style":70},[46,522,138],{"style":52},[46,524,525,527,529,531,533],{"class":48,"style":49},[46,526,179],{"style":52},[46,528,388],{"style":56},[46,530,132],{"style":52},[46,532,392],{"style":70},[46,534,138],{"style":52},[46,536,537,539,541,543,546],{"class":48,"style":49},[46,538,179],{"style":52},[46,540,236],{"style":56},[46,542,132],{"style":52},[46,544,545],{"style":56},"true",[46,547,138],{"style":52},[46,549,550,552,554],{"class":48,"style":49},[46,551,126],{"style":52},[46,553,244],{"style":56},[46,555,138],{"style":52},[46,557,558],{"class":48,"style":49},[46,559,253],{"style":56},[11,561,562,563,566,567,570],{},"Use this array as ",[23,564,565],{},"defineConfig.plugins",". Calling ",[23,568,569],{},"getPetByIdHandler()"," without data now uses generated Faker values.",[15,572,574],{"id":573},"register-the-handler-collection","Register the handler collection",[11,576,577,578,211,581,584,585,587],{},"With ",[23,579,580],{},"handlers: true",[23,582,583],{},"handlers.ts"," exports a ",[23,586,236],{}," array with every handler in operation order. Register it in Node or a browser.",[589,590,591,649],"code-group",{},[36,592,594],{"language":38,"filename":281,"code":593,"class":41},"import { setupServer } from 'msw\u002Fnode'\nimport { handlers } from '.\u002Fsrc\u002Fgen\u002Fhandlers\u002Fhandlers'\n\nexport const server = setupServer(...handlers)",[23,595,596,72,610,72,626,72,628],{"class":44},[46,597,598,600,602,604,606,608],{"class":48,"style":49},[46,599,53],{"style":52},[46,601,57],{"style":56},[46,603,293],{"style":60},[46,605,64],{"style":56},[46,607,67],{"style":52},[46,609,300],{"style":70},[46,611,612,614,616,619,621,623],{"class":48,"style":49},[46,613,53],{"style":52},[46,615,57],{"style":56},[46,617,618],{"style":60},"handlers ",[46,620,64],{"style":56},[46,622,67],{"style":52},[46,624,625],{"style":70},"'.\u002Fsrc\u002Fgen\u002Fhandlers\u002Fhandlers'",[46,627],{"class":48,"style":49},[46,629,630,632,634,636,638,640,642,645,647],{"class":48,"style":49},[46,631,111],{"style":52},[46,633,325],{"style":52},[46,635,328],{"style":60},[46,637,331],{"style":52},[46,639,334],{"style":117},[46,641,337],{"style":56},[46,643,644],{"style":52},"...",[46,646,236],{"style":60},[46,648,371],{"style":56},[36,650,653],{"language":38,"filename":651,"code":652,"class":41},"browser-worker.ts","import { setupWorker } from 'msw\u002Fbrowser'\nimport { handlers } from '.\u002Fsrc\u002Fgen\u002Fhandlers\u002Fhandlers'\n\nexport const worker = setupWorker(...handlers)",[23,654,655,72,671,72,685,72,687],{"class":44},[46,656,657,659,661,664,666,668],{"class":48,"style":49},[46,658,53],{"style":52},[46,660,57],{"style":56},[46,662,663],{"style":60},"setupWorker ",[46,665,64],{"style":56},[46,667,67],{"style":52},[46,669,670],{"style":70},"'msw\u002Fbrowser'",[46,672,673,675,677,679,681,683],{"class":48,"style":49},[46,674,53],{"style":52},[46,676,57],{"style":56},[46,678,618],{"style":60},[46,680,64],{"style":56},[46,682,67],{"style":52},[46,684,625],{"style":70},[46,686],{"class":48,"style":49},[46,688,689,691,693,696,698,701,703,705,707],{"class":48,"style":49},[46,690,111],{"style":52},[46,692,325],{"style":52},[46,694,695],{"style":60},"worker ",[46,697,331],{"style":52},[46,699,700],{"style":117},"setupWorker",[46,702,337],{"style":56},[46,704,644],{"style":52},[46,706,236],{"style":60},[46,708,371],{"style":56},[11,710,711,712,715,716,719],{},"Call ",[23,713,714],{},"server.listen()"," in your test setup, or ",[23,717,718],{},"await worker.start()"," in your browser entry.",[15,721,723],{"id":722},"set-the-base-url-at-runtime","Set the base URL at runtime",[11,725,726,727,729,730,733],{},"The ",[23,728,226],{}," option is fixed when Kubb generates the handlers. When the host is only known at runtime, such as from your API client's config, call ",[23,731,732],{},"createHandlers"," with it:",[36,735,737],{"language":38,"filename":281,"code":736,"class":41},"import { setupServer } from 'msw\u002Fnode'\nimport { createHandlers } from '.\u002Fsrc\u002Fgen\u002Fhandlers\u002Fhandlers'\n\nexport const server = setupServer(...createHandlers({ baseURL: getBaseURL() }))",[23,738,739,72,753,72,768,72,770],{"class":44},[46,740,741,743,745,747,749,751],{"class":48,"style":49},[46,742,53],{"style":52},[46,744,57],{"style":56},[46,746,293],{"style":60},[46,748,64],{"style":56},[46,750,67],{"style":52},[46,752,300],{"style":70},[46,754,755,757,759,762,764,766],{"class":48,"style":49},[46,756,53],{"style":52},[46,758,57],{"style":56},[46,760,761],{"style":60},"createHandlers ",[46,763,64],{"style":56},[46,765,67],{"style":52},[46,767,625],{"style":70},[46,769],{"class":48,"style":49},[46,771,772,774,776,778,780,782,784,786,788,790,792,794,797],{"class":48,"style":49},[46,773,111],{"style":52},[46,775,325],{"style":52},[46,777,328],{"style":60},[46,779,331],{"style":52},[46,781,334],{"style":117},[46,783,337],{"style":56},[46,785,644],{"style":52},[46,787,732],{"style":117},[46,789,195],{"style":56},[46,791,226],{"style":56},[46,793,132],{"style":52},[46,795,796],{"style":117},"getBaseURL",[46,798,799],{"style":56},"() }))",[11,801,802,803,806,807,810],{},"Each handler also takes ",[23,804,805],{},"{ baseURL }"," as its second argument, which overrides the configured one for that handler. Pass ",[23,808,809],{},"undefined"," as the first argument to keep the default response. This lets you mock two services that share a path:",[36,812,814],{"language":38,"filename":281,"code":813,"class":41},"export const server = setupServer(\n  listPetsHandler(undefined, { baseURL: 'https:\u002F\u002Fpets.example.com' }),\n  listPetsHandler(undefined, { baseURL: 'https:\u002F\u002Fstaging.example.com' }),\n)",[23,815,816,72,830,72,856,72,881],{"class":44},[46,817,818,820,822,824,826,828],{"class":48,"style":49},[46,819,111],{"style":52},[46,821,325],{"style":52},[46,823,328],{"style":60},[46,825,331],{"style":52},[46,827,334],{"style":117},[46,829,337],{"style":56},[46,831,832,834,837,839,841,843,845,847,849,852,854],{"class":48,"style":49},[46,833,126],{"style":56},[46,835,836],{"style":117},"listPetsHandler",[46,838,337],{"style":56},[46,840,809],{"style":56},[46,842,211],{"style":52},[46,844,57],{"style":56},[46,846,226],{"style":56},[46,848,132],{"style":52},[46,850,851],{"style":70},"'https:\u002F\u002Fpets.example.com' ",[46,853,244],{"style":56},[46,855,138],{"style":52},[46,857,858,860,862,864,866,868,870,872,874,877,879],{"class":48,"style":49},[46,859,126],{"style":52},[46,861,836],{"style":117},[46,863,337],{"style":56},[46,865,809],{"style":56},[46,867,211],{"style":52},[46,869,57],{"style":56},[46,871,226],{"style":56},[46,873,132],{"style":52},[46,875,876],{"style":70},"'https:\u002F\u002Fstaging.example.com' ",[46,878,244],{"style":56},[46,880,138],{"style":52},[46,882,883],{"class":48,"style":49},[46,884,371],{"style":56},{"title":886,"searchDepth":887,"depth":887,"links":888},"",5,[889,891,892,893,894],{"id":17,"depth":890,"text":18},2,{"id":270,"depth":890,"text":271},{"id":374,"depth":890,"text":375},{"id":573,"depth":890,"text":574},{"id":722,"depth":890,"text":723},"\u002Fextensions\u002Fkubb-labs\u002Fplugin-msw\u002Fguides\u002Fmock-api",1793639048125]