0

I'm trying to add @testing-library/jest-dom to my project with no luck. It is installed by yarn into my dev dependencies and imported in setupTests.js with:

import '@testing-library/jest-dom';

The test fails with:

Invalid Chai property: toBeDisabled

  40 |     it('should be disabled', async () => {
  41 |       const button = screen.getByRole('button', { name: 'Create button' });
> 42 |       expect(button).toBeDisabled();
     |       ^
  43 |     });
  44 |   });

Where am I going wrong?

Hoi Chan
  • 3
  • 3

1 Answers1

1

Looks like you're using both Chai and Jest in the same test suite, both of which have an expect function. In this test you're expecting to use Jest but it's Chai that's getting called. Chai's expect does not have a toBeDisabled function property, thus the error.

Are you also importing Chai in that file? If so, remove that import. If you need both testing frameworks I'd recommend separating your tests into different files so that in one file you're only running tests with one framework.

squillman
  • 13,363
  • 3
  • 41
  • 60
  • Ah I didn't realise they both have `expect`! That explains it clearly, thanks! I've changed it to `expect(button.disabled).to.be.true()` which works as expected. Appreciate that this isn't using jest-dom but your answer has explained the root cause. – Hoi Chan Sep 23 '21 at 14:38