enzymejs / chai-enzyme

Chai.js assertions and convenience functions for testing React Components with enzyme
MIT License
787 stars 72 forks source link

`blank()` does not return errors for non-null components as suggested #126

Open siakaramalegos opened 7 years ago

siakaramalegos commented 7 years ago

I was struggling to get blank() to fail when a component had content. I eventually copied the exact code from the example but had it return content rather than null:

class NullFixture extends React.Component {
  render () {
    return (<p>hi</p>)
  }
}

The example tests do not fail (they pass):

const nullWrapper = mount(<NullFixture />) // mount/render/shallow when applicable

expect(nullWrapper).to.be.blank()
expect(nullWrapper).to.be.empty
ayrton commented 7 years ago

Confirmed this is indeed a bug when the component is mounted (not when using shallow or render):

class NullFixture extends React.Component {
  render () {
    return (<p>hi</p>)
  }
}

const it = createTest(<NullFixture />)

describe('#blank', () => {
  describe('()', () => {
    it('passes negated when the actual does not match the expected', (wrapper) => {
      expect(wrapper).to.not.be.blank()
    })
  })
})

Results:

$ NODE_ENV=test npme mocha test/blank.test.js

  #blank
    ()
      ✓ (shallow): passes negated when the actual does not match the expected
      1) (mount): passes negated when the actual does not match the expected
      ✓ (render): passes negated when the actual does not match the expected

  2 passing (161ms)
  1 failing

  1) #blank () (mount): passes negated when the actual does not match the expected:
     AssertionError: expected <NullFixture /> not to be empty

     HTML:

     <p data-reactroot="">hi</p>
      at blank.test.js:12:33
      at Context.<anonymous> (createTest.js:20:7)
      at callFn (/Users/adc/Developer/producthunt/chai-enzyme/node_modules/mocha/lib/runnable.js:334:21)
      at Test.Runnable.run (/Users/adc/Developer/producthunt/chai-enzyme/node_modules/mocha/lib/runnable.js:327:7)
      at Runner.runTest (/Users/adc/Developer/producthunt/chai-enzyme/node_modules/mocha/lib/runner.js:428:10)
      at /Users/adc/Developer/producthunt/chai-enzyme/node_modules/mocha/lib/runner.js:534:12
      at next (/Users/adc/Developer/producthunt/chai-enzyme/node_modules/mocha/lib/runner.js:348:14)
      at /Users/adc/Developer/producthunt/chai-enzyme/node_modules/mocha/lib/runner.js:358:7
      at next (/Users/adc/Developer/producthunt/chai-enzyme/node_modules/mocha/lib/runner.js:284:14)
      at Immediate.<anonymous> (/Users/adc/Developer/producthunt/chai-enzyme/node_modules/mocha/lib/runner.js:326:5)
      at runCallback (timers.js:574:20)
      at tryOnImmediate (timers.js:554:5)
      at processImmediate [as _immediateCallback] (timers.js:533:5)
cy6erskunk commented 6 years ago

The problem still exists, now in shallow and render, in case of non-empty component:

class NullFixture extends React.Component {
  render () {
    return (<AnotherNullFixture/>)
  }
}

class AnotherNullFixture extends React.Component {
  render () {
    return (<p>text</p>)
  }
}

it = createTest(<NullFixture />)

describe.only('#blank', () => {
  describe('(non-empty component)', () => {
    it('passes when the actual matches the expected', (wrapper) => {
      expect(wrapper).to.not.be.blank()
    })

    // it('fails when the actual does not match the expected', (wrapper) => {
    //   expect(() => {
    //     expect(wrapper).to.be.blank()
    //   }).to.throw()
    // })
  })
})

Results:

NODE_ENV=test npx mocha test/blank.test.js

  #blank
    (non-empty component)
      1) (shallow): passes when the actual matches the expected
      ✓ (mount): passes when the actual matches the expected
      2) (render): passes when the actual matches the expected

  1 passing (365ms)
  2 failing

  1) #blank (non-empty component) (shallow): passes when the actual matches the expected:
     AssertionError: expected <NullFixture /> not to be empty

     HTML:

     <p>text</p>
      at /Users/user/Documents/_prj/chai-enzyme/test/blank.test.js:60:33
      at Context.<anonymous> (/Users/user/Documents/_prj/chai-enzyme/test/support/createTest.js:14:7)
      at callFn (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runnable.js:348:21)
      at Test.Runnable.run (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runnable.js:340:7)
      at Runner.runTest (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:443:10)
      at /Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:549:12
      at next (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:361:14)
      at /Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:371:7
      at next (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:295:14)
      at Immediate.<anonymous> (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:339:5)
      at runCallback (timers.js:789:20)
      at tryOnImmediate (timers.js:751:5)
      at processImmediate [as _immediateCallback] (timers.js:722:5)

  2) #blank (non-empty component) (render): passes when the actual matches the expected:
     AssertionError: expected the node in <??? /> not to be empty

     HTML:

     <p>text</p>
      at /Users/user/Documents/_prj/chai-enzyme/test/blank.test.js:60:33
      at Context.<anonymous> (/Users/user/Documents/_prj/chai-enzyme/test/support/createTest.js:26:7)
      at callFn (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runnable.js:348:21)
      at Test.Runnable.run (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runnable.js:340:7)
      at Runner.runTest (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:443:10)
      at /Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:549:12
      at next (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:361:14)
      at /Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:371:7
      at next (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:295:14)
      at Immediate.<anonymous> (/Users/user/Documents/_prj/chai-enzyme/node_modules/mocha/lib/runner.js:339:5)
      at runCallback (timers.js:789:20)
      at tryOnImmediate (timers.js:751:5)
      at processImmediate [as _immediateCallback] (timers.js:722:5)

It seems not correct to check children in these cases in isEmpty, why not use exists from enzyme, which is the replacement for the deprecated method isEmpty?