CODEWITHSUNDEEP
javascriptreactjsunit-testingsvgmocha.js
kylie
kylie

Reputation: 53

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

I am writing unit tests for a method that renders two different SVG <line/> elements (each line is hereby referred to as a 'wick'). The props passed to this method are: {x1, x2, y1, y2}, and the method is invoked twice in the render() method of my <Candle /> component.

When writing tests for this component as a whole, I am struggling to test both wick's props. This is what I'm currently running:

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);
  });
});

This test fails as it stands:

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

As seen in my comments, I've tried anticipating a designated numeric value as well as testing the appropriate keys in my values array of objects.

Is there a better way to go about this? Or am I missing something obvious in my code?

Upvotes: 1

Views: 631

Answers (1)

Tom Pridham
Tom Pridham

Reputation: 134

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

you could replace the forEach with this

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);
})

Upvotes: 1

Related Questions