如何使用Jest / Enzyme测试链接？
如何使用Jest / Enzyme测试链接？
提问于 2017-09-14 15:42:33
我有一个像这样的react组件：
<A href="/products" onClick={(e) => this.onClick(tf)}>my link</A>有一个附加到链接的onClick处理程序，它将执行单独的函数，或者允许链接传播和用户重定向：
onClick(e, tf) {
e.stopPropagation();
if(tf){
e.preventDefault();
doSomethingElse();
}
// If execution gets here, then the link will follow through to /products
}如何使用Enzyme / Jest进行测试？
回答 1
Stack Overflow用户
发布于 2020-01-24 15:04:31
以下是单元测试解决方案：
index.jsx
import React, { Component } from 'react';
class Link extends Component {
onClick(e, tf) {
e.stopPropagation();
if (tf) {
e.preventDefault();
}
}
render() {
const { tf } = this.props;
return (
<a href="/products" onClick={(e) => this.onClick(e, tf)}>
my link
</a>
);
}
}
export default Link;index.test.jsx
import Link from './index';
import React from 'react';
import { shallow } from 'enzyme';
describe('46213271', () => {
it('should handle click, call stopPropagation and preventDefault', () => {
const mProps = { tf: 'tf' };
const wrapper = shallow(<Link {...mProps}></Link>);
expect(wrapper.exists()).toBeTruthy();
const mEvent = { stopPropagation: jest.fn(), preventDefault: jest.fn() };
wrapper.simulate('click', mEvent);
expect(mEvent.stopPropagation).toBeCalledTimes(1);
expect(mEvent.preventDefault).toBeCalledTimes(1);
});
it('should handle click, call stopPropagation', () => {
const mProps = { tf: '' };
const wrapper = shallow(<Link {...mProps}></Link>);
expect(wrapper.exists()).toBeTruthy();
const mEvent = { stopPropagation: jest.fn(), preventDefault: jest.fn() };
wrapper.simulate('click', mEvent);
expect(mEvent.stopPropagation).toBeCalledTimes(1);
expect(mEvent.preventDefault).not.toBeCalled();
});
});100%覆盖的单元测试结果：
PASS src/stackoverflow/46213271/index.test.jsx (17.292s)
46213271
✓ should handle click, call stopPropagation and preventDefault (13ms)
✓ should handle click, call stopPropagation (2ms)
-----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.jsx | 100 | 100 | 100 | 100 | |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 19.864s源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/46213271
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46213271
复制相关文章
相似问题
腾讯云开发者
