Jest: Improve chai support (with detailed output, to match jest exceptions)

[G-Rath]

🚀 Feature Proposal

A clear and concise description of what the feature is.

When using jest matchers, we get nice output:

describe('atest', () => {
  it('tests something', () => {
    expect('hello world').toEqual('hello sunshine');
  });
});

  ● atest › tests something

    expect(received).toEqual(expected)

    Expected value to equal:
      "hello sunshine"
    Received:
      "hello world"

      at Object.it (phone-number.test.ts:59:27)
          at new Promise (<anonymous>)
      at process._tickCallback (internal/process/next_tick.js:68:7)

If I use chai#expect matchers:

describe('atest', () => {
  it('tests something', () => {
    chai.expect('hello world').to.equal('hello sunshine');
  });
});

  ● atest › tests something

    AssertionError: expected 'hello world' to equal 'hello sunshine'

      at Object.it (phone-number.test.ts:60:35)
          at new Promise (<anonymous>)
      at process._tickCallback (internal/process/next_tick.js:68:7)

When I run the same chai test in mocha:

  2) atest
       tests something:

      AssertionError: expected 'hello world' to equal 'hello sunshine'
      + expected - actual

      -hello world
      +hello sunshine

      at Context.<anonymous> (test\src\utilities\omitFrom.test.ts:31:49)

From my understanding, the issue lies with Jest not taking any advantage of information provided by Chai, as Chai exposes expected & received information as part of the thrown assertion error, meaning it's on the testing system to utilise that information.

Personally, this is the biggest showstopper for me switching to Jest :)

---

In addition, WebStorm shows a diff for some Jest matches, but not for chai matchers (whereas it does show a diff for chai in mocha, as evident in my previous screenshot).

I'm not sure what's required for this to be supported, but figure its related to the way Jest formats its output? (@segrey it'd be great if you could provide any info on this, if possible).

My efforts right now are hampered somewhat by #8118, so I can't be sure of how functional my test suites are right now :joy:

[SimenB]

I'm not sure what you're asking for? What would you want the output to look like?

[G-Rath]

Sorry, I was in a rush, and so picked probably one of the worse examples - I've updated the issue description :)

Ultimately I think what I'm asking for could be summed up as

Assertion messages should be formatted in approximately the same manner, with as much as the same information as possible when using chai.expect as you'd see when using jest matches

[SimenB]

I don't think we should add support for chai into jest, but the errorFormatter proposal in the other issue seems reasonable to me

[G-Rath]

the errorFormatter proposal in the other issue seems reasonable to me

Totally, that's what I figured! Just wanted to make sure these points were written up somewhere so they could be referenced and included when said proposal gets implemented :D

[segrey]

@G-Rath Thanks for reporting. Filed as https://youtrack.jetbrains.com/issue/WEB-37940. ETA is IntelliJ 2019.1.2, the fix will require jest.test.tree.use.jasmine.reporter to be enabled as #8118 is already fixed in 2019.1.
@SimenB Would be great to expose actual/expected values from Chai failed assertions as it will be done for Jest assertions ("The assertion result in a structured format" from https://github.com/facebook/jest/issues/8118#issuecomment-472461758).

[SimenB]

Yeah, we'll probably serialize every prop on the thrown error when we fix it, so chai should work out of the box, same as expect.

[rpgeeganage]

@SimenB ,
Can I contribute to this if required please?

[SimenB]

Yes please! PR very much welcome :)

[rpgeeganage]

@SimenB ,
Thank you very much, I will work on this and https://github.com/facebook/jest/issues/7594

[SimenB]

8454

(waiting for upstream https://github.com/chaijs/chai/pull/1257 for even better integration, but I think this is solved from Jest's side)