Can't import @testing-library/jest-dom, expect.extend is not a function

Question

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?

Answer 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.