Unexpected reserved word 'await' in in jest tesing

user_18598679 0
Viewed 360

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")
  })
})
async-await jestjs reactjs
1 Answers

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")
  })
})
user_92015870
Related