enzymejs/chai-enzyme

Multiple className assertion fails

Closed this issue · 5 comments

When asserting for multiple className separated by space I get this error.
As you can read the excpected value and the actual one are equals but somehow it fails

AssertionError: expected the node in <WithRoute[BaseLink] /> to have a 'just-a-class-name active' class, but it has 'just-a-class-name active'      

HTML:

<a data-reactroot="" href="/home" class="just-a-class-name active"></a>

Basically, this works:

expect(output.find('a')).to.have.attr('class', 'just-a-class-name active');

But this doesn't

expect(output.find('a')).to.have.className('just-a-class-name active');

I would not expect the latter to work. I might expect that to.have.className('a', 'b') would work, however.

Working with "class" as a space-separated list is legacy and something I'd want APIs to discourage.

It seems that I have a similar issue, but without the spaces.

With this:

expect(wrapper).to.have.className('baseClass')

I get this:

AssertionError: expected <withClasses(SampleComponent) /> to have a 'baseClass' class, but it has undefined

    HTML:

    <span class="baseClass"></span>

But this one passes the assertion

expect(wrapper).to.have.attr('class', 'baseClass')

Sorry, just found out that I had to use .dive() as the component being tested was created using with a HOC. Here's the working code:

expect(wrapper.dive()).to.have.className('baseClass')

Thanks!

@LeonardoGentile we don't support multi value assertions (not in this assertion nor in any other I believe), you'll have to write your test as:

expect(output.find('a')).to.have.className('just-a-class-name');
expect(output.find('a')).to.have.className('active');