window.alert not implemented when running tests

Question

I am trying to experiment some with the jest tester for react and when I do an npm test, the test passes ok, but I get this error:

Snapshots:   0 total
  console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Not implemented: window.alert

I know this is due to the fact that I an alert call in my code because if I comment that alert call out I don't get the error.

I tried the solution mentioned here but I still get the error. Is there any way I can eliminate this error while still keeping the alert call in my code?

Here's the test:

it('renders without crashing', () => {
  jest.spyOn(window, 'alert').mockImplementation(() => {});
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

you can always just overwrite the window.alert function but honestly if the test passes where is the problem ? I dont supposed you want the test to wait for user confirmation each time ? — jonathan Heindl, Apr 22 '19 at 00:46
@ jonathan Heindl - I tried overriding the window.alert but I still get the error. It's more of understanding why the override isn't working, I just like to understand what's going on. — dcp, Apr 22 '19 at 00:50
Thanks for the code! Does the override in this SO link help? https://stackoverflow.com/questions/41885841/how-to-mock-the-javascript-window-object-using-jest — AryanJ-NYC, Apr 22 '19 at 00:55
Can you show how you are calling `window.alert` in your code? Are you saving a reference to it or anything like that? — Brian Adams, Apr 23 '19 at 02:11
@brian-lives-outdoors - I'm just calling it like this: alert("some message here") — dcp, Apr 23 '19 at 09:00

score 1 · Answer 1 · answered Nov 12 '19 at 10:00

Here is the solution, use jest.fn() instead of using jest.spyOn:

index.tsx:

import React, { Component } from 'react';

class App extends Component {
  componentDidMount() {
    window.alert('haha');
  }
  render() {
    return <div></div>;
  }
}

export default App;

index.spec.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './';

describe('App', () => {
  it('renders without crashing', () => {
    window.alert = jest.fn();
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
    expect(window.alert).toBeCalledWith('haha');
    ReactDOM.unmountComponentAtNode(div);
  });
});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/55787988/index.spec.tsx (9.069s)
  App
    ✓ renders without crashing (26ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.453s, estimated 13s

Dependencies versions:

"jest": "^24.9.0",
"jsdom": "^15.2.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/55787988

window.alert not implemented when running tests

1 Answers1

Linked