Question

我正在为一个方法编写单元测试，该方法呈现两个不同的SVG <line/>元素（每一行在此被称为＆＃39; wick＆＃39;）。传递给此方法的道具是：{x1, x2, y1, y2}，并且在我的render()组件的<Candle />方法中调用该方法两次。

在为整个组件编写测试时，我正在努力测试两个 wick的道具。这就是我目前正在运行的内容：

it("should render a wick line", () => {
  const wrapper = shallow(<Candle {...baseProps}/>);
  const wicks = wrapper.find("line");
  const values = [
    {
      x1: 5,
      x2: 5,
      y1: 30,
      y2: 5
    }, {
      x1: 5,
      x2: 5,
      y1: 10,
      y2: 5
    }];

  wicks.forEach((wick) => {
    expect(wick.prop("x1")).to.eql(values.x1);
    // expect(wick.prop("x2")).to.eql(5);
    // expect(wick.prop("y1")).to.eql(values.y1);
    // expect(wick.prop("y2")).to.eql(5);
  });
});

此测试失败了：

1) should render a wick line
     primitives/candle
     expected 5 to deeply equal undefined

从我的评论中可以看出，我已经尝试过预期指定的数值以及测试values对象数组中的相应键。

还有更好的方法吗？或者我在代码中遗漏了一些明显的东西？

Answer 1

尝试expect(wick.prop("x1")).to.eql(values[0].x1);

你可以用这个

替换forEach

wicks.forEach((wick, i) => {
  expect(wicks[i].prop("x1")).to.eql(values[i].x1);
  expect(wick.prop("x2")).to.eql(5);
  expect(wick.prop("y1")).to.eql(values.y1);
  expect(wick.prop("y2")).to.eql(5);
})

使用Mocha在React中测试渲染的SVG组件上的道具

1 个答案: