Jest-dom: Tests in VS Code throw TypeErrors

[pjaws]

• react-testing-library version: 9.3.2
• react version: 16.11.0
• node version: 12.6.0
• npm (or yarn) version: 6.13.1

Relevant code or config:

// Sample.js
import React from 'react';

function Sample() {
  return <div>Sample</div>;
}

export default Sample;

// Sample.spec.js
import React from 'react';
import { render } from '../test-utils';
import Sample from './Sample';

describe('Sample', () => {
  it('renders without crashing', () => {
    const text = 'Sample';
    const { getByText } = render(<Sample />);

    expect(getByText(text)).toBeInTheDocument(); // TypeError: expect(...).toBeInTheDocument is not a function
  });
});

Problem description:

I have the vscode-jest extension installed to automatically run tests inside VS Code, and all of the queries provided by Testing Library throw the following error: TypeError: expect(...).toBeInTheDocument is not a function.

The tests pass when I run them in the terminal, but obviously, it's pretty annoying to have all my test files showing "red" inside my editor.

I don't know if this is an issue with the Jest extension, Testing Library, or some combination of the two, but I have to imagine other people have run into this and solved it, though I couldn't find an answer to this by searching.

Any help is greatly appreciated!

[alexkrolick]

The jest extension probably doesn't run the jest setup file from the config that sets up jest-dom

[gnapse]

Is this the extension: orca.vscode-jest?

I just tried this, created a minimal CRA repo, added the setupTests.js file with the jest-dom import, and modified the built-in test to be done with RTL, and it works in vscode. Can you try and do the same, and see if it works for you with a minimal repo? Doing what I described?

Also, I may transfer this issue to jest-dom because, even if it's an issue at all, it's more of a jest-dom issue.

[JPBlancoDB]

Hi @pjaws, you need to install jest-dom npm install --save-dev @testing-library/jest-dom and then import it into your config file if you want to have those available globally:

import '@testing-library/jest-dom/extend-expect'

or you could add it into your test:

import {toBeInTheDocument, toHaveClass} from '@testing-library/jest-dom'

[pjaws]

I already have it installed, along with the setup file...

On Sun, Nov 24, 2019 at 11:28 PM Juan Pablo Blanco [e-mail]
wrote:

Hi @pjaws https://github.com/pjaws, you need to install jest-dom npm
install --save-dev @testing-library/jest-dom and then import it into your
config file if you want to have those available globally:
import '@testing-library/jest-dom/extend-expect' or you could add it into
your test import {toBeInTheDocument, toHaveClass} from
'@testing-library/jest-dom'`

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/testing-library/jest-dom/issues/167?email_source=notifications&email_token=AMVRRIRQM4B7VZUO7SYRLPDQVN5CJA5CNFSM4JQIKHJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFBNC4Y#issuecomment-558027123,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AMVRRIXB47KX6OCBVUD5MKTQVN5CJANCNFSM4JQIKHJA
.

[JPBlancoDB]

Could you share your setup file?

[gnapse]

Could you share your setup file?

Or a minimal repo where the issue can be reproduced?

[pjaws]

As I was setting up the example repo, I re-opened the existing project I was having issues with to copy code, and it seems that reloading VS Code solved this issue for me. Hopefully if anyone else runs into this, it will be the solution for them as well.

Probably safe to close this issue.

[misolo]

I have the same issue
run npm run test, get error TypeError: expect(...).toBeInTheDocument is not a function
I've tried everything: re-opened vs code/ restart / rm -rf node_modules; npm install but it still fails

 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.5.0",
 "jest": "24.9.0",

any idea?

[gnapse]

@misolo your tests run ok when run directly in the terminal, and only fail in this way when run in vscode's terminal or by vscode's jest extension?

[misolo]

It finally works after I upgraded the latest:

   "@testing-library/jest-dom": "^5.5.0",
   "@testing-library/react": "^10.0.3",

[kentr]

For me, this worked:

1. Change the Path to Jest setting for the workspace in VS Code to npm run test --
2. Restart the Jest runner in VS Code.

Edit: Upon further review, I would say that this falls under the Jest extension "non-standard environments" documentation