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

Question

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

在为这个组件作为一个整体编写测试时，我正在努力测试 both 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 组件上测试道具

Using Mocha to test props on a rendered SVG component in React

javascript

svg

unit-testing

mocha.js

reactjs