React Test Utilities Other Utilities Simulate

You will need to have window, window.document and window.document.createElement globally available before you import React. Otherwise React will think it can’t access the DOM and methods like setState won’t work.

Simulate.{eventName}(
  element,
  [eventData]
)

Changing the value of an input field and then pressing ENTER.

// <input ref={(node) => this.textInput = node} />
const node = this.textInput;
node.value = 'giraffe';
ReactTestUtils.Simulate.change(node);
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});

React Test Utilities Other Utilities Simulate

Clicking an element

// <button ref={(node) => this.button = node}>...</button>
const node = this.button;
ReactTestUtils.Simulate.click(node);

Testing/mocking a service inside functional container in React/Jest

You need to wait for the promise to resolve setting your test as async and using await / act, this is the method I use but you can find other options by googling jest asynchronous testing

  import { act } from 'react-dom/test-utils';
  ...
  describe("Toolbar Add functionality", async () => {
    let wrapper;
    let gameService;

    beforeEach(() => {
      // I'm not sure about this arragement for gameService creation though
      jest.mock("../services/game");
      const gameService = new Game();
      wrapper = mount(<Toolbar gameService={gameService} />);
      wrapper.find("IconButton").simulate("click");
    });

    it("Should make an API call when clicked add button", () => {
      console.log(gameService);
      const getSpy = jest.spyOn(gameService, "add");

      const inputField = wrapper.find("form").find("input");
      inputField.simulate("change", { target: { value: "name" } });
      wrapper
        .find("form")
        .find("IconButton[type='submit']")
        .simulate("click");
      await act(async () => await Promise.resolve());
      expect(getSpy).toBeCalled();
    });
  });

simulate browser events when writing tests for React js?

There's also a few other useful utilities there for making assertions about the DOM structure. Just download the development addons build (react-with-addons.js) and pull it out like so:

var ReactTestUtils = React.addons.TestUtils;
ReactTestUtils.Simulate.click(node);

Recommend

React Test Utilities Reference renderIntoDocument()

React Test Utilities Reference findRenderedComponentWithType()

React Test Utilities Reference scryRenderedComponentsWithType()

React Test Utilities Reference findRenderedDOMComponentWithTag()

React Test Utilities Reference scryRenderedDOMComponentsWithTag()

React Test Utilities Reference findRenderedDOMComponentWithClass()

React Test Utilities Reference scryRenderedDOMComponentsWithClass()

React Test Utilities Reference findAllInRenderedTree()

React Test Utilities Reference isCompositeComponentWithType()

React Test Utilities Reference isCompositeComponent()

React Test Utilities Reference isDOMComponent()

React Test Utilities Reference isElementOfType()

React Test Utilities Reference isElement()

React Test Utilities Reference mockComponent()

React Test Utilities Reference act()

React Test Utilities

React Profiler API onRender Callback

React Profiler API Usage

React AJAX and APIs Example: Using AJAX results to set local state

React.Component Class Properties defaultProps

React.Component Other APIs forceUpdate()

React.Component Other APIs setState()

React.Component Reference UNSAFE_componentWillUpdate()

React.Component Reference UNSAFE_componentWillReceiveProps()

React.Component Reference UNSAFE_componentWillMount()

React.Component Reference componentDidCatch()

React.Component Reference static getDerivedStateFromError()

React.Component Reference getSnapshotBeforeUpdate()

React.Component Reference static getDerivedStateFromProps()

React.Component Reference shouldComponentUpdate()

React.Component Reference componentWillUnmount()

React.Component Reference componentDidUpdate()

React.Component Reference componentDidMount()

React.Component Reference constructor()

React.Component Reference render()

React.Component Overview

Render Props Caveats Be careful when using Render Props with React.PureComponent

React Render Props Using Props Other Than render

React Render Props Use Render Props for Cross-Cutting Concerns

React Render Props

React Hooks FAQ Performance Optimizations How to read an often-changing value from useCallback?

React Hooks FAQ Performance Optimizations How to avoid passing callbacks down?

React Hooks FAQ Performance Optimizations Are Hooks slow because of creating functions in render?

React Hooks FAQ Performance Optimizations How to create expensive objects lazily?

React Hooks FAQ Performance Optimizations How to memoize calculations?

React Hooks FAQ Performance Optimizations How do I implement shouldComponentUpdate?

React Hooks FAQ Performance Optimizations What can I do if my effect dependencies change too often?

React Hooks FAQ Performance Optimizations Is it safe to omit functions from the list of dependencies?

React Hooks FAQ From Classes to Hooks How can I measure a DOM node?

React Hooks FAQ From Classes to Hooks Is there something like forceUpdate?

React Hooks FAQ From Classes to Hooks How do I implement getDerivedStateFromProps?

React Hooks FAQ From Classes to Hooks Why am I seeing stale props or state inside my function?

React Hooks FAQ From Classes to Hooks How to get the previous props or state?

React Hooks FAQ From Classes to Hooks Should I use one or many state variables?