Jest-dom: Readme file for Usage

[goran-dev]

I used create-react-app with typescript template.
I went to Readme, to usage and pasted this code: import '@testing-library/jest-dom/'

and got err:

When I changed that code to import '@testing-library/jest-dom/extend-expect' (added "extend-expect') it works

Maybe we update the docs??

[gnapse]

Maybe what's happening to you is that you are adding the import statement to the file configured in jest to be loaded like this:

{
    "setupFiles": ["./jest/setupTestFramework.js"]
}

when in reality you should load it in the file that's configured like this in the jest config:

{
    "setupFilesAfterEnv": ["./jest/setupTestFramework.js"],
}

And yes, if you confirm that that solves your issue, and you find that there's a documentation indicating it the other way, then we should updated that documentation. At a glance I think the jest documentation we link to in our README is correct, as it links to the setupFilesAfterEnv config setting.

[goran-dev]

Thanks for reply <3 . I am not adding anything. I create default "npx create-react-app . " and "npx create-react-app . --template typescript" command and that is it. Both commands auto generate/add same line inside setupTests.js/ts with "extend-expect" and the end:

But when I add like in docs, without it, it breaks. I don't even know where to add those commands above. Never mind it works with default generated code. But when I deleted that file, and later I wanted it back, I went to docs and was stuck... We can close this.

[gnapse]

Hmmm, no. Don't close this. It should work the same with both /extend-expect and without it. Not sure why that's not the case.

[timbakkum]

Having the same issue:
import '@testing-library/jest-dom'; removes the syntax errors in the file, while
import '@testing-library/jest-dom/extend-expect'; makes the test run fine without type errors

[gnapse]

I dug a bit more into this, and some things seem relevant:

I tried npx create-react-app --template typescript my-app and then checked the dependencies used. The @testing-library/jest-dom found in node_modules/ was v4.2.4. So the first thing here is that CRA is using a version from when using the /extend-expect path was the only way.

Now about this:

I used create-react-app with typescript template.
I went to Readme, to usage and pasted this code: import '@testing-library/jest-dom/'

If you use a recent version of create-react-app, you do not need to follow this lib's README. jest-dom already comes preinstalled and configured in your generated app.

Bottom line is: can you confirm if in the situations you're experiencing this the version of jest-dom being used is v5.x.x? Or is it lower? If you can confirm this is happening in v5 please provide a minimal sample repo that I can clone and investigate.

[iandevlin]

I am having similar issues with Vue, although neither of these solutions are working for me.
No matter which one I add, I constantly get errors like:

TS2339: Property 'toBeVisible' does not exist on type 'HTMLElement'

Both in the IDE and when I try to run a simple test.

[gnapse]

@iandevlin can you provide a minimal repo/sandbox where we can reproduce this? It sounds weird because toBeVisible is meant to be called on whatever expect(...) returns. Under what circumstances does expect() returns a HTMLElement?

[iandevlin]

Hi @gnapse, and thanks for the response.
I don't have a repo or sandbox at the moment, as this is part of a larger project and I "just" wanted to give testing-library a go to see if it's useful for our purposes, but I have spent the entire day so far just trying to get one test to even run because of TypeScript.

The code looks like:

import { render } from '@testing-library/vue';
import Component from '@/components/MyComponent/MyComponent.vue';

test('MyComponent', async () => {
    const { getByTestId } = render(Component);
    expect(getByTestId('test').toBeVisible());
});

And this is not only showing up as an error when it runs, but the IDE (PHPStorm) also shows it as an error.

I am aware that it could be some other project setting interfering and causing this, but I am at a total loss as to what it might be.

[gnapse]

Indeed, you are using it wrong:

See how you are calling it (I added spaces to make my point more clear)

    expect(  getByTestId('test').toBeVisible()  );

How you should call it:

    expect(  getByTestId('test')  ).toBeVisible();

See the difference?

[iandevlin]

@gnapse Oh for the love of...I knew it was probably something silly and stupid, but not THAT silly and stupid! I was staring at it so long that I simply didn't see it.
I will try this all again later. Thank you very much for your responses and help, much appreciated.

[gnapse]

We've all done something as silly as this at some point so don't worry. One thing that would've helped you in this situation is if you were using TypeScript, which would've flagged this error earlier. Even as you typed, if your editor supports it.

[gnapse]

I'm going to go ahead and close this issue. From all the discussion and my recent tries, the original problem reported here is not an issue in our latest releases. We can always continue the discussion and even reopen it if needed.