Unexpected reserved word 'await' in in jest tesing

Question

I am developing a react-native application. but it gives a error as given bellow image in the console. here I have attached both js file and test file.

---

Error display in the terminal

Test suite failed to run

SyntaxError: C:\Geethma\skyU_frontend\skyu-frontend\src\features\dashboard\components\jest-tests\ExpandedInstancDetails.test.js: Unexpected reserved word 'await'. (10:8)

   8 |       }
   9 |     it("should go to after click",()=>{
> 10 |         await act(async () => {
     |         ^
  11 |             render(
  12 |               <Router history={mockHistory}>
  13 |                 <ExpandedInstancDetails />

  at instantiate (node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
  at toParseError (node_modules/@babel/parser/src/parse-error.js:58:12)
  at Parser.raise (node_modules/@babel/parser/src/tokenizer/index.js:1763:19)
  at Parser.checkReservedWord (node_modules/@babel/parser/src/parser/expression.js:2718:12)
  at Parser.parseIdentifierName (node_modules/@babel/parser/src/parser/expression.js:2653:12)
  at Parser.parseIdentifier (node_modules/@babel/parser/src/parser/expression.js:2621:23)
  at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1256:27)
  at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:683:23)
  at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:662:21)
  at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:631:23)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 3.712 s Ran all test suites.

---

ExpandedInstancDetails.js file

    import { useHistory } from "react-router-dom";
    
    const ExpandedInstancDetails = () => {
      let history = useHistory();
    
      function handleClick() {
        history.push("/home");
      }
    
      return (
        <button data-testid="button" type="button" onClick={handleClick}>
          Go home
        </button>
      );
    }
export default ExpandedInstancDetails;

---

ExpandedInstancDetails.test.js file

import { render, screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';    
import ExpandedInstancDetails from "../ExpandedInstancDetails";

describe('HomeButton', () => {
  
  const mockHistory = {
    push: jest.fn(),
  }

  it('should go to home after click', () => {
    await act(async () => {
      render(
        <Router history={mockHistory}>
          <ExpandedInstancDetails/>
        </Router>
      )

      userEvent.click(screen.getByTestId('button'))
    })

    
    expect(mockHistory.push).toBeCalledWith("/home")
  })
})

Answer 1

await needs to go along with async. Your unit test does not declare async, so that's why it's throwing an error.

For the fix, you should add async after it instead of inside of act

import { render, screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';    
import ExpandedInstancDetails from "../ExpandedInstancDetails";

describe('HomeButton', () => {
  
  const mockHistory = {
    push: jest.fn(),
  }
  
  //add `async` after `it`
  it('should go to home after click', async () => {
    await act(() => {
      render(
        <Router history={mockHistory}>
          <ExpandedInstancDetails/>
        </Router>
      )

      userEvent.click(screen.getByTestId('button'))
    })

    
    expect(mockHistory.push).toBeCalledWith("/home")
  })
})