如何使用 Jest/Enzyme 在 React 中测试 keydown 事件？

Question

I have the following component:

import React, { Component } from 'react';

export class Cars extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSearch: true
    };
  }

  componentDidMount() {
    document.addEventListener('keydown', this.escFunction, false);
  }

  escFunction(event) {
    if (event.keyCode === 27) this.skipCar();
  }

  skipCar() {
    this.setState({ activeSearch: false });
  }

  render() {
    return <div></div>;
  }
}

I wrote following tests to check if this function is called:

test('should close', () => {
    let events = {};
    document.addEventListener = jest.fn((event, cb) => {
      events[event] = cb;
    });

    const wrapper = shallow(<Cars {...props} />);
    const instance = wrapper.instance();
    const spy = jest.spyOn(instance, 'skipCar');

    events.keyDown({ keyCode: 27 });

    expect(spy).toHaveBeenCalled();
    expect(wrapper.state().activeSearch).toBe(false);
  });

but when I run this test I have an error:

TypeError: events.keyDown is not a function

    > 82 |     events.keyDown({ keyCode: 27 });
         |            ^

Why I have this error???? How can I run this test to check if method is run?

Answer 1

You should use event.keydown({ keyCode: 27 }) , then your code works fine.

Here is the working unit test for your code:

index.jsx :

import React, { Component } from 'react';

export class Cars extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSearch: true
    };
    this.escFunction = this.escFunction.bind(this);
  }

  componentDidMount() {
    document.addEventListener('keydown', this.escFunction, false);
  }

  escFunction(event) {
    if (event.keyCode === 27) this.skipCar();
  }

  skipCar() {
    this.setState({ activeSearch: false });
  }

  render() {
    return <div></div>;
  }
}

index.spec.jsx :

import React from 'react';
import { shallow } from 'enzyme';
import { Cars } from './';

const props = {};

test('should close', () => {
  let events = {};
  document.addEventListener = jest.fn((event, cb) => {
    events[event] = cb;
  });

  const wrapper = shallow(<Cars {...props} />);
  const instance = wrapper.instance();
  const spy = jest.spyOn(instance, 'skipCar');

  events.keydown({ keyCode: 27 });

  expect(spy).toHaveBeenCalled();
  expect(wrapper.state().activeSearch).toBe(false);
});

Unit test result:

 PASS  src/stackoverflow/58748367/index.spec.jsx (7.988s)
  ✓ should close (10ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.214s

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

Answer 2

A better approach is not to mock addEventListener but to trigger the event on the document.

var event = new KeyboardEvent('keydown', {'keyCode': 37});
document.dispatchEvent(event);

This will allow you mimic real life scenario.