React + Jest Testing Error - ReferenceError: expect is not defined

Question

I have literally trawled everywhere for an answer to this and possibly tried 99% of things out there so i decided to start a thread of its own so others can run their eyes over what i have currently and see if they can spot the issue.

i am very new to Jest testing and decided to try implement it onto our code base. i used this guide to make sure everything i done was perfect but still this error occurs A Practical Guide To Testing React Applications With Jest

I am testing this aginst a simple functional component which uses react-hook-form to produce a form on the page and then sends the completed form to our backend via a redux call

I have setup the setupTests.js file as:

import '@testing-library/jest-dom'
import { configure } from "enzyme"
import Adapter from "enzyme-adapter-react-16";
import '@testing-library/jest-dom/extend-expect';

configure({ adapter: new Adapter() });

Updated my package.json test command to

"test": "react-scripts test --env=jsdom --setupFiles ./src/setupTests.js"

Here is the test spec im trying to run with a simple test:

import React from 'react';
import { render as rtlRender, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from '../../../store';
import AddNewProperty from './AddNewProperty';

configure({ adapter: new Adapter() });

const render = component => rtlRender(
    <Provider store={store()}>
        {component}
    </Provider>
)

describe('Add New Property', () => {
    test('component redners successfully', () => {
        render(<AddNewProperty />)
        // expect(screen.getByText('Apartment Number')).toBeInTheDocument();
    })    
});

here is the error returned on the screen for me:

     FAIL  src/components/Forms/Agency/AddNewProperty.spec.js
  ● Test suite failed to run

    ReferenceError: expect is not defined

      3 | import Adapter from "enzyme-adapter-react-16";
      4 | import '@testing-library/jest-dom/extend-expect';
    > 5 | configure({ adapter: new Adapter() });
        | ^

      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:9:1)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/index.js:3:1)
      at Object.<anonymous> (src/setupTests.js:5:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.167s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

I have all the packages installed in with the latest versions also

Rone

Do you mind outlining the things you've tried? – Colcothar

@JonathanS. i have tried alot of things multiple times over the past 7 days, i have had to also fix the <Provider> error that occurs thus why the store is seperate and imported a function. I have tried it without a setupTests.js file and everything imported within the test page also .. as for specifics on others they dont come to mind exactly what was completed – Rone

Answer 1

You would want to set up the files after the test framework has been installed

Here are a couple of ways you can go about doing it (For this particular question, method 1 is more relevant)

1) react-scripts

Replace/Add --setupFilesAfterEnv instead of using --setupFiles

Example: "test": "react-scripts test --setupFilesAfterEnv <test setup filepath>

2) jest.config.js

setupFilesAfterEnv: [
  './setupTests.js',
],

Along with that make sure your node version is at least 12

Colcothar

Thank you, this small change has got my test case passing with no more errors – Rone

Hi @GaryWilson if this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Colcothar