使用反应测试库测试到达路由器

Question

通过 react 测试库与 reach-router 一起使用 https://testing-library.com/docs/example-reach-router

function renderWithRouter(
  ui,
  { route = '/', history = createHistory(createMemorySource(route)) } = {}
)

函数的第二个参数，怀疑是一个对象，{}。但是使用“=”而不是“:”意味着它不是名称-值对。那是什么？

另外，两个对象之间的赋值运算符的作用是什么

{ route = '/', history = createHistory(createMemorySource(route)) } = {}

Answer 1

此语法调用 Destructuring assignment 并设置函数参数的默认值

看看这个例子：

function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) {
  console.log(size, coords, radius);
  // do some chart drawing
}

drawChart({
  coords: {x: 18, y: 30},
  radius: 30
});

In the function signature for drawChart above, the destructured left-hand side is assigned to an empty object literal on the right-hand side: {size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}. You could have also written the function without the right-hand side assignment. However, if you leave out the right-hand side assignment, the function will look for at least one argument to be supplied when invoked, whereas in its current form, you can simply call drawChart() without supplying any parameters. The current design is useful if you want to be able to call the function without supplying any parameters, the other can be useful when you want to ensure an object is passed to the function.

返回renderWithRouter函数示例

function renderWithRouter(ui, { route = "/", history = function(){} } = {}) {
  console.log(route, history);
}

console.log(renderWithRouter({})) //output: / ƒ (){}

使用反应测试库测试到达路由器

Testing reach router with react-testing library

javascript

reactjs

jestjs

react-testing-library

reach-router