reactjs - 我如何在组件内使用 Enzyme+Mocha 方法调用进行测试
问题描述
无法弄清楚如何用酶 + 摩卡 + sinon 测试组件方法。我想测试组件是否在单击按钮时调用方法 loadPosts。
import React from 'react';
import { configure, mount} from 'enzyme';
import { expect } from 'chai';
import Adapter from 'enzyme-adapter-react-16';
import { Posts } from '../Components/Posts';
import sinon from 'sinon';
configure({ adapter: new Adapter() });
describe('Posts', () => {
let wrapper;
let inst;
beforeEach(() => {
wrapper = mount(<Posts />);
inst = wrapper.instance();
sinon.spy(inst, 'loadPosts');
wrapper.find('button').simulate('click');
});
it('should load posts on button click', () => {
wrapper.update();
expect(inst.loadPosts).to.have.property('callCount', 1);
});
it('should set `loading` to true', () => {
expect(wrapper.state('loading')).to.equal(true);
});
});
这是我的组件:
import React, {Component} from 'react';
import axios from 'axios';
export class Posts extends Component {
state = {
posts: null,
loading: false
}
componentDidMount() {}
loadPosts = () => {
this.setState({loading: true}, () => {
axios.get('https://jsonplaceholder.typicode.com/todos')
.then( d => this.setState({
posts: d.data
}));
});
}
render() {
return (<div>
<h4>I am posts</h4>
<button onClick= {this.loadPosts}>Load posts</button>
</div>);
}
}
但是我的测试失败并出现错误:异常错误:预期 [Function] 的属性 'callCount' 为 1 但得到了 0
解决方案
onClick
你的button
直接绑定到this.loadPosts
组件渲染时的任何内容。
当您替换loadPosts
为间谍时,它对当前呈现的内容没有任何影响,button
因此onClick
不会调用您的间谍。
修复它的两个选项是this.loadPosts
使用如下箭头函数调用:
<button onClick={() => this.loadPosts()}>Load posts</button>
...所以当onClick
被调用时,它会调用this.loadPosts
当前设置的任何内容。
另一种选择是在创建间谍后强制重新渲染,以便onClick
绑定到您的间谍而不是原始函数。
推荐阅读
- oracle - 减少 oracle ec2 实例
- reactjs - React TextInput 占位符停留在特定值
- javascript - 对齐矩形内的段落
- python-3.x - 为数据数组中的每个网格提取时间序列数据
- node.js - 找不到模块:错误:无法在反应应用程序中解析“firebase/app”
- mysql - 获取“参数:2
启动 SQL Server 时出现错误类型“错误 - python - 在 URL 上使用请求时,我在 JSON 值中得到双引号。不用正则表达式处理?
- javascript - 所以我正在制作一个编辑器网站,我想要一个保存按钮,它只会保存框中编写的代码,而不是整个编辑器代码
- python - 根上已知界的牛顿法
- performance - 您如何计算 eBPF 探针的性能影响?