How to extend expect() globally with Jest?

[jiv-e]

Hi!

First, thank you!!! Create React App is an awesome resource and great documentation is big part of it. Still after searching for answer and trying different things I couldn't find a solution.

I would like to extend expect() with expect-element. Is this possible to do globally?

[gaearon]

You can probably do this in src/setupTests.js as described here. Does it work?

[jiv-e]

Thanks! Seems promising..

I tried this in src/setupTests.js

import expectElement from 'expect-element'
expect.extend(expectElement)
console.log('Test')

Then...

yarn run test

I got...

 TypeError: expect(...).toHaveAttribute is not a function

And I couldn't see the console.log statement.

[gaearon]

Have you ejected by any chance?

[anilreddykatta]

@jiv-e can you provide package.json used? I tested when I included expect and expect-element both, added below snippet to setupTests.js

// src/setupTests.js
import expect from 'expect'
import expectElement from 'expect-element'
expect.extend(expectElement)
console.log('Test')

//src/App.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import expect from 'expect'
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  expect(div).toNotHaveAttribute('id')
});

Worked for me! Can you confirm this ?

[jiv-e]

@gaearon, in fact yes. I have ejected. Does it cause some side effects?

Here's the project I'm working on: https://github.com/jiv-e/preact-widget-boilerplate. I understand if the issue is out of the scope of create-react-app.

@anilreddykatta, you can find the package.json from above repo. Or if you want, you can clone it and try it out. I couldn't get your example to work.

[anilreddykatta]

@jiv-e

"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",

is missing in your package.json, probably that is the reason setupTests.js is not executing for jest. Can you confirm by adding this, also testing with snippets mentioned above or like this.

import expectAssert from 'expect' // We already have one global expect injected by JEST

it('renders welcome message', () => {
 const welcome = <h1>Preact widget boilerplate</h1>
 expect(welcome).toNotHaveAttribute('id');
})

Let me know if it helps!

[gaearon]

Yea, that’s the reason. If you haven’t used src/setupScripts.js by the time you eject, we don’t include it in the setupTestFrameworkScriptFile setting, but you can add it yourself now to your Jest configuration.

[anilreddykatta]

Should we include this in the documentation? I am unable to find where it is mentioned about this?

[gaearon]

Add what exactly?

[anilreddykatta]

@gaearon If we don't use setupTests.js before ejecting, setupTestFrameworkScriptFile has to be manually included in package.json.

[jiv-e]

Thank you very much @gaearon and @anilreddykatta! This is now resolved.

[Timer]

@anilreddykatta we should probably mention that feature is only available pre-eject and that it requires manual configuration post-eject.

Would you be willing to put together a PR based on @gaearon's response?

[anilreddykatta]

@Timer Sure. I will do that. 👍

[jiv-e]

I'm already working on this.

[anilreddykatta]

@jiv-e Sure. That would be great!