fix(types): augment jest matchers

[sheremet-va]

Closes #664

Vitest expect now can see external jest libraries matchers, namely @testing-library/jest-dom assertions are recognized when importing from vitest. (global expect is still overriden by jest's expect)

[netlify]

✔️ Deploy Preview for vitest-dev ready!

🔨 Explore the source changes: 834696f

🔍 Inspect the deploy log: https://app.netlify.com/sites/vitest-dev/deploys/61fa23be40abaa0008504879

😎 Browse the preview: https://deploy-preview-665--vitest-dev.netlify.app

[pd4d10]

Now we have the types, but there seems to be a problem at runtime? Because @testing-library/jest-dom doesn't add the methods to the expect() correctly

[sheremet-va]

Now we have the types, but there seems to be a problem at runtime? Because @testing-library/jest-dom doesn't add the methods to the expect() correctly

Can you create a reproduction? It works for me.

[pd4d10]

Just got it working correctly. This is the repo: https://github.com/bytedance/bytemd

Errors messages:

 FAIL  packages/bytemd/src/__tests__/editor.test.ts > mode > tab
Error: Invalid Chai property: toBeVisible
 ❯ packages/bytemd/src/__tests__/editor.test.ts:79:56
     77|     const preview = $.getByText('Preview')
     78| 
     79|     expect($.container.querySelector('.bytemd-editor')).toBeVisible()
       |                                                        ^
     80|     expect(write).toHaveClass('bytemd-toolbar-tab-active')
     81|     // expect($.container.querySelector('.bytemd-preview')).toHaveStyle('width:0');

Added these lines to make it work:

import { expect } from 'vitest'
import matchers from '@testing-library/jest-dom'
expect.extend(matchers)

https://github.com/bytedance/bytemd/blob/7fb94a215d955ed1d0ea845dbf1a2528e8834f3d/test-setup.ts#L2-L3

[sheremet-va]

Just got it working correctly. This is the repo: https://github.com/bytedance/bytemd

Errors messages:

 FAIL  packages/bytemd/src/__tests__/editor.test.ts > mode > tab
Error: Invalid Chai property: toBeVisible
 ❯ packages/bytemd/src/__tests__/editor.test.ts:79:56
     77|     const preview = $.getByText('Preview')
     78| 
     79|     expect($.container.querySelector('.bytemd-editor')).toBeVisible()
       |                                                        ^
     80|     expect(write).toHaveClass('bytemd-toolbar-tab-active')
     81|     // expect($.container.querySelector('.bytemd-preview')).toHaveStyle('width:0');

Added these lines to make it work:

import { expect } from 'vitest'
import matchers from '@testing-library/jest-dom'
expect.extend(matchers)

https://github.com/bytedance/bytemd/blob/7fb94a215d955ed1d0ea845dbf1a2528e8834f3d/test-setup.ts#L2-L3

If you are not using test.globals, then you need to manually extend them, since library doesn't have access to expect, yes.

[pd4d10]

Thanks. Got stuck by this issue for a little while, so I added a note to the documentation for the benefit of other users

#676