ReactTestUtilsを使ったイベント処理のテストが期待通りの結果になりません。

Question

困っていること

以下のテストが通りません。
参考: React開発 現場の教科書(本)

ソースコードです。

test("onClickFunction", () => {
  const props = {
    background: "red",
    color: "white",
    text: "hoge",
    onClickFunction: jest.fn(),
  };
  const instance = ReactTestUtils.renderIntoDocument(
    <div>
      <Btn {...props} />
    </div>
  );
  const node = ReactDOM.findDOMNode(instance);

  ReactTestUtils.Simulate.click(node);
  expect(props.onClickFunction).toBeCalled();
});

  ● onClickFunction
    expect(jest.fn()).toBeCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

import * as React from "react";
import styled from "styled-components";

interface 略

const BtnStyled 略

const Btn: React.FC<Props> = ({ background, color, onClickFunction, text }) => {
  return (
    <BtnStyled color={color} background={background} onClick={onClickFunction}>
      {text}
    </BtnStyled>
  );
};

export default Btn;

関係なさそうな部分は省略しました。必要な箇所があれば教えてください。
また、より良いコンポーネントのテスト方法（ベストプラクティス?）があれば教えてください

Answer 1

enzyme（とenzyme-adapter-react-16）を導入して以下のようにソースコードを変更したらテストが通りました。

import React from "react";
import ReactDOM from "react-dom";
import ReactTestUtils from "react-dom/test-utils";
import { configure, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });

import Btn from "../../web/src/components/atoms/Btn";

test("onClickFunction", () => {
  const props = {
    background: "red",
    color: "white",
    text: "hoge",
    onClickFunction: jest.fn(),
  };

  const subject = mount(<Btn {...props} />);
  subject.find("button").simulate("click");

  expect(props.onClickFunction).toBeCalled();
});

• mountは当初、shallow()だったのですがテストが通りませんでした。