javascript - TypeError:e.preventDefault 不是函数,而调用()函数
问题描述
我的组件是
const _onBoldClick = (e) => {
e.preventDefault();
onEnterText(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
}
<button className = "text-button-style" onMouseDown = { e => { _onBoldClick(e)} }>B</button>
我得到错误,
TypeError: e.preventDefault is not a function
74 |
75 | const _onUnderlineClick = (e) => {
> 76 | e.preventDefault();
| ^
77 | onEnterText(RichUtils.toggleInlineStyle(editorState, 'UNDERLINE'));
78 |
79 | }
at _onUnderlineClick (src/components/L3_Admin/L4_AnnouncementsTab/L4_AnnouncementsPage.js:76:11)
这是我尝试过的测试代码,
it('onmousedown U button', async () => {
let responseData = [
{
}]
const spy = jest.spyOn(axios, 'get');
const preventDefault = jest.fn();
const _onUnderlineClick = jest.fn();
spy.mockImplementation(async() => await act(() => Promise.resolve({ data: responseData })));
const component = mount( <Provider store= {store}>
<AnnouncementsTab /> </Provider>);
component.update();
// expect(component.find('button')).toHaveLength(6);
// expect(component.find('.text-button-style')).toHaveLength(3);
await component.find('.text-button-style').at(0).invoke('onMouseDown',{ preventDefault })(
{
nativeEvent: {
preventDefault,
e: jest.fn(),
_onUnderlineClick: (e)=>{}
}
},
1000
)
});
解决方案
函数签名是.invoke(invokePropName)(...args) => Any。方法没有第二个参数.invoke()
。您应该将模拟的事件对象传递给.invoke()
.
例如
MyComponent.jsx
:
import React from 'react';
export function MyComponent() {
const _onBoldClick = (e) => {
e.preventDefault();
};
return (
<button
className="text-button-style"
onMouseDown={(e) => {
_onBoldClick(e);
}}
>
B
</button>
);
}
MyComponent.test.jsx
:
import { mount } from 'enzyme';
import React from 'react';
import { MyComponent } from './MyComponent';
describe('67817812', () => {
it('onmousedown U button', async () => {
const preventDefault = jest.fn();
const component = mount(<MyComponent />);
component.find('.text-button-style').at(0).invoke('onMouseDown')({ preventDefault });
expect(preventDefault).toBeCalledTimes(1);
});
});
测试结果:
PASS examples/67817812/MyComponent.test.jsx (7.766 s)
67817812
✓ onmousedown U button (36 ms)
-----------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
MyComponent.jsx | 100 | 100 | 100 | 100 |
-----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 8.754 s, estimated 9 s
推荐阅读
- javascript - Javascript:在最后两个特定字符之间提取字符串
- reactjs - 是的,验证接受超过 0 个输入数字。喜欢的用户可以输入 0.001 或 0.0001。但不仅仅是0
- python - 如何在 PyPEG 中处理所有可能的 C 类块注释样式
- javascript - Lighthouse 性能优化:删除由 es05 和 es2015 插件构建的未使用的 main.js 和 polyfills.js 文件,这些文件在 Angular 11 中不起作用
- vue.js - 如何在带有 vue 3 的项目中使用 simpleBar
- python - python中ab ==0和a ==b有什么区别
- docker - Docker 安装使用安装最新版本的 Docker 客户端:Docker 引擎 - 社区
- java - 如何在 java 中读取数据并将其放入模型中?
- amazon-quicksight - Amazon Quicksight - 默认为最近一周的动态过滤器
- python - 如何使用 FASTAPI 重定向 Oauth 令牌返回?