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

Question

Home.js

class Home extends Component {
componentDidMount() {
console.log("Check")
}
render() {
return (
<div>Home Page Screen</div>
)
}
}
export default Home

首页.测试.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)
}) 

测试用例的输出

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)

当我尝试检查组件DidMount生命周期方法是否正在使用jest/酶在组件主页中调用失败时，但在浏览器中，组件生命周期方法调用正常

Answer 1

我认为检查是否调用componentDidMount本身并不太重要，但您可以通过触发它断言其他事情已经发生。 仅仅断言它被称为

例如，如果你的组件在挂载时设置了一些状态，那么你可以编写这样的测试：

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

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