javascript - 如何在 jest/enzyme 测试中测试 axios 获取请求功能?
问题描述
我已经关注 React 组件,它在父组件中作为子组件呈现,并且传递了道具:
<Component
localStorageValue={'test-walue'}
requestDataFunc={getData}
requestUserData={getUserData}
expectedResponseKey={'key'}
dataType={'test}
activePage={'index'}
saveData={this.setData}
/>
所以 requestDataFunc 是一个传递给组件并在 componentDidMount 中运行的函数:
componentDidMount() {
requestDataFunc().then(({ data }) => {
const { selectedDataItems } = this.state;
const expectedResponseData = data[expectedResponseKey];
let interimDataArr = [];
expectedResponseData.forEach((item) => {
interimDataArr = [...interimDataArr, {
...item,
active: selectedDataItems.length ? selectedDataItems.some((selectedItemId) => selectedItemId === item.id) : false,
}];
});
}
但是当我运行测试时,我得到了:
TypeError:无法读取未定义的属性“then”
requestDataFunc().then(({ data }) => {
const { selectedDataItems } = this.state;
const expectedResponseData = data[expectedResponseKey];
let interimDataArr = [];
我刚开始测试渲染组件:
describe('correct component render', () => {
const defaultProps = {
localStorageValue: 'test-walue',
requestDataFunc: jest.fn(),
requestUserData: jest.fn(),
expectedResponseKey: 'key',
dataType: 'test',
activePage: 'index',
saveData: jest.fn(),
};
const wrapper = shallow(<ComponentName { ...defaultProps } />);
test("render component", () => {
expect(wrapper.length).toEqual(1);
});
});
我想我需要以某种方式模拟该请求应接收的请求和数据。如何正确执行此操作?
解决方案
您是否尝试过如下模拟承诺:
var mockPromise = new Promise((resolve, reject) => {
resolve(<mock response similar to actual promise response>);
});
describe('correct component render', () => {
const defaultProps = {
localStorageValue: 'test-walue',
requestDataFunc: jest.fn().mockReturnValueOnce(mockPromise),
requestUserData: jest.fn(),
expectedResponseKey: 'key',
dataType: 'test',
activePage: 'index',
saveData: jest.fn(),
};
const wrapper = shallow(<ComponentName { ...defaultProps } />);
test("render component", () => {
expect(wrapper.length).toEqual(1);
});
});
推荐阅读
- angular - 如何使用 keycloak 中的授权概念在 Angular 应用程序中应用权限
- docusignapi - DocuSign API - 文本选项卡的默认高度是多少
- html - 即使应用了 lang="nl",VoiceOver 也会以系统语言 (en) 读取 aria-live 的内容。如何改变?
- python - 如何在抓取网站过程中自动登录?
- facebook - Facebook graph api获取评论帖子的用户名
- python - 防止 Spacy 分词器拆分特定字符
- mongodb - spring mongo 查询根据匹配条件更新数组元素
- security - 如何在域之间传递 JWT 会话令牌?
- .htaccess - 搜索引擎友好的 URL - .htaccess
- javascript - y 轴在 D3 Charts v4 中设置自定义值