我刚刚写完第一篇Reactjs
组件,我准备编写一些测试(我使用material-ui
's Table
and Toggle
)。
我读到jest
and enzyme
但我觉得我还缺少一些东西。
我的组件如下所示(简化):
export default class MyComponent extends Component {
constructor() {
super()
this.state = {
data: []
}
// bind methods to this
}
componentDidMount() {
this.initializeData()
}
initializeData() {
// fetch data from server and setStates
}
foo() {
// manuipulatig data
}
render() {
reutrn (
<Toggle
id="my-toggle"
...
onToggle={this.foo}
>
</Toggle>
<MyTable
id="my-table"
data={this.state.data}
...
>
</MyTable>
)
}
}
现在进行测试。我想为以下场景编写一个测试:
- 使用模拟数据提供initializeData。
- 切换我的切换
- 断言数据已更改(我应该断言数据本身还是断言 my-table 是更好的做法?)
所以我从一开始就这样开始:
describe('myTestCase', () => {
it('myFirstTest', () => {
const wrapper = shallow(<MyComponent/>);
}
})
我运行了它,但失败了:ReferenceError: fetch is not defined
我的第一个问题是,我如何嘲笑initializeData
克服使用 fetch 调用真实代码的需要?
我遵循了这个答案:https://stackoverflow.com/a/48082419/2022010 https://stackoverflow.com/a/48082419/2022010并提出以下建议:
describe('myTestCase', () => {
it('myFirstTest', () => {
const spy = jest.spyOn(MyComponent.prototype, 'initializeData'
const wrapper = mount(<MyComponent/>);
}
})
但我仍然遇到同样的错误(我也尝试过componentDidMount
代替initializeData
但结果是一样的)。
Update:我错了。我确实收到了 fetch is not Defined 错误,但这一次它来自 Table 组件(这是material-ui 的 Table 的包装)。现在我开始思考这一点,我确实有很多“取物”……我想知道如何照顾它们。