使用 jest/enzyme 在 React 上测试 ComponentDidMount 失败

Question

Home.js

class Home extends Component {

  componentDidMount() {
    console.log("Check")
  }

  render() {
    return (
      <div>Home Page Screen</div>
    )
  }
}

export default Home

Home.test.js

import React from "react"
import Enzyme, { mount } from "enzyme"
import EnzymeAdapter from "enzyme-adapter-react-16"
import Home from "./Home"

Enzyme.configure({ adapter: new EnzymeAdapter() })

test("componet Lifecycle test", () => {
  const wrapper = mount(<Home />)
  const spy = jest.spyOn(wrapper.instance(), "componentDidMount")
  expect(spy).toHaveBeenCalledTimes(1)
}) 

output of Test Case

src/Home.test.js
  ● Console

    console.log src/Home.js:6
      Check

  ● componet Lifecycle test

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

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

      15 |   const wrapper = mount(<Home />)
      16 |   const spy = jest.spyOn(wrapper.instance(), "componentDidMount")
    > 17 |   expect(spy).toHaveBeenCalledTimes(1)
         |               ^
      18 | }) 

      at Object.<anonymous> (src/Home.test.js:17:15)

when I tried to check whether the componentDidMount Life cycle method is calling in the component Home using jest/enzyme is failing but in the browser, the component lifecycle method is calling fine

Answer 1

I don't think it's too important that you check if componentDidMount itself is called but you can assert other stuff has happened by triggering it. there isn't much value in just asserting that it was called

for example if you're component sets some state on mount then you can write a test like this:

componentDidMount() {
    this.setState({something: 'hello'})
}

wrapper.setState({ something: '' })
wrapper.instance().componentDidMount()
expect(wrapper.state('something')).toEqual('hello')