React: RTL setup suggested no longer works

[kentshenlim]

Describe your suggestion

The lesson proposes following https://www.robinwieruch.de/vitest-react-testing-library/ for Vitest and RTL setup. The setup.js file in the website no longer works following the update of @testing-libary/jest-dom. Instead of import matchers from '@testing-library/jest-dom/matchers'; use import * as matchers from '@testing-library/jest-dom/matchers';

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-react-new-introduction-to-react-testing

Checks

• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [ ] Would you like to work on this issue?

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[CouchofTomato]

@TheOdinProject/javascript Can someone take a look please.

[wise-king-sullyman]

Not able to test it myself atm, but it looks like the RTL team has a different suggestion: https://github.com/testing-library/jest-dom#with-vitest

[driwell]

I just tested the instructions on https://github.com/testing-library/jest-dom#with-vitest right now the setup.js file can be simplified to this:

import { afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/vitest';

// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
  cleanup();
});

The changes are these. from: import matchers from '@testing-library/jest-dom/matchers'; to: import '@testing-library/jest-dom/vitest';

and

remove this: expect.extend(matchers);

I proposed this change to the article we are linking to for the configuration of Vitest. Here's the pull request: https://github.com/rwieruch/blog_robinwieruch_content/pull/303

UPDATE: The pull request was merged so this can be considered fixed and closed too.