Magic assert

AVA team is extremely excited to announce the new & shiny AVA feature. We call it “Magic assert”.

We could try and describe magic-assert and all its features, but it’s faster and better to let you see what it is all about right away.

Strings

test('strings', t => {
  const actual = 'this is so cool';
  const expected = 'this is so bad';

  t.is(actual, expected);
});

Different value types

test('different types', t => {
  const actual = 'this is so cool';
  const expected = {msg:'this is so bad'};

  t.is(actual, expected);
});

Objects and arrays

test('objects', t => {
  const actual = {
    a: 1,
    b: {
      c: 2
    }
  };

  const expected = {
    a: 2,
    b: {
      c: 1
    }
  };

  t.deepEqual(actual, expected);
});

t.true/t.false assertions

These kind of assertions obviously can’t have diffs, because they’re being compared to true/false. Having “actual: true, expected: false” output wouldn’t be much of a help, so instead we display the value of each statement in the assertion.

test('nested', t => {
  const actual = {a:[1]};
  
  t.true(actual.a[0]);
});

---

Now that we got you all excited (hopefully), few words about what it actually is. Magic assert is not an assertion library, but a feature that handles assertion errors and is responsible for displaying them in a clean yet informative way. It replaces power-assert output, although it still uses its core for some cases.

Magic assert adds code excerpts pointing to the source of the error and clean colorful diffs to each error report. You can also spot there’s now more spacing between each error, which makes it easier to go through all the errors.

Your tests don’t need to be modified in any way to take support magic-assert’s output. If you use other assertion library like expect/chai or other, you are in luck too - you will get the same magical output!

There’s one more thing…

React support

Magic assert PR also lands two new assertion methods to improve React support: t.jsxEquals() and t.jsxNotEquals(). And as you may have expected, it provides a nice output of the “React tree” as well!

test('react', t => {
  const actual = <div className="body">Hello</div>;
  const expected = <div className="header">Hello</div>;

  t.jsxEqual(actual, expected);
});

I’m not sure whether this change should be in this or separate PR - feedback welcome here too.

Credits

Magic assert was made possible by these amazing modules:

• power-assert by Takuto Wada (@twada).
• diff by Kevin Decker (@kpdecker).
• pretty-format by James Kyle (@thejameskyle).

Huge thanks!

---

We think it is a big step forward towards more comfortable debugging of failed tests and developer happiness in general.

You can try Magic assert by using PR https://github.com/avajs/ava/pull/1154 today!

We’d love to hear your feedback and ideas on how to improve the output of Magic assert! Thank you!

[ccorcos]

Using your current WIP branch:

 Difference:

    Array [
      Object {
        children: Array [
          Object {
  -         type: "text",
  -         value: "[hello](world)",
  +         children: Array [
  +           Object {
  +             type: "text",
  +             value: "hello",
  +           },
  +         ],
  +         type: "link",
  +         url: "world",
          },
        ],
        type: "italic",
      },

Awww yeah! Thank you so much @vadimdemedes 😃

[vadimdemedes]

I think we’ll probably stick with the default “-” for “missing” and “+” for “extra” signs, like in git diff. We can improve it after some real world usage of magic assert (if needed).