为什么当我使用Mock Service Worker测试两个get请求时，request .url. searchpar

Question

我在一个使用Mock Service Worker的react应用中做了一个测试。我这样设置服务器:

const server = setupServer(
// https://api.github.com/search/users?q=${userName}&type=users&per_page=10&page=${pageNo}`,
rest.get('https://api.github.com/search/users/', async (req, res, ctx) => {
console.log('rest req.params', req.params) // {} empty object
console.log('rest req.url.searchParams', req.url.searchParams) // {} empty object
const users = search_data[1]
return res(ctx.json(users))
}),
// https://api.github.com/users/${user}
rest.get(`https://api.github.com/users/:user`, async (req, res, ctx) => {
// console.log('rest req.params.user', req.params.user) // this works as it should
return res(
ctx.json(
users_data[1].users.find((user) => user.login === req.params.user)
)
)
})
)

上面的第一个get请求拦截了被注释掉的api端点(它上面的那个)。我假设在一个对象中获取查询参数，比如userName，但是返回的对象是空的。我做错了什么?

截获的代码如下:

const searchGithubApi = (
userName: string,
pageNo: number = 1,
signal: AbortSignal
) => {
console.log('userName', userName) // I get the correct userName
return fetch(
`https://api.github.com/search/users?q=${userName}&type=users&per_page=10&page=${pageNo}`,
{
headers: {
Accept: 'application/vnd.github.v3+json',
},
signal,
}
).then((res) => res.json())
}  

Answer 1

您应该使用URLSearchParams API来检索请求查询参数:

req.url.searchParams.get('q')

注销req.url.searchParams将始终返回一个空对象，因为您实际上注销了一个不将查询参数存储为其属性的类实例(因此您看到的是一个空对象)。

Answer 2

请看下面的链接，它解释得很好。https://github.com/mswjs/msw/discussions/910