javascript - [单元测试]:如何在具有模拟 axios 调用的点击事件后获取更新的道具
问题描述
代码
let basicProps = {
inCart: false,
quantity: 0,
min: 1,
max: 10,
productData: mockProductData
};
const mockData = {
inCart: true,
quantity: 1,
min: 1
};
const mockOnAddToCart = jest.fn(async (data, props) => {
const newProps = await mockAxios(data).post()
const updatedProps = { ...props, newProps };
return updatedProps;
});
test('if clicking the "ADD" button, renders the "increment" button',() => {
let newProps;
async function onClickEvent () {
newProps = await mockOnAddToCart();
};
const { getByText, rerender } = render(
<CTAWrapper
{...basicProps}
onAddToCart={onClickEvent}
/>
);
// CLICK ADD BUTTON
fireEvent.click(getByText('Add'));
console.log({...newProps}); // log - {}
// RE-RENDER PRODUCT CARD COUNTER
// rerender(<CTAWrapper {...newProps}/>);
// TEST IF THE INCREMENT BUTTON IS THERE
// expect(getByText('+')).toBeInTheDocument();
});
__mocks__/axios.js
export default function(data) {
return {
get: jest.fn(() => Promise.resolve(data)),
post: jest.fn(() => Promise.resolve(data))
};
}
问题
此代码似乎无法正常工作。AFAIK,这是因为当我触发 onClick 事件时,它会onClickEvent
异步运行,这会newProps
在它被记录到控制台后更新它的值。newProps
需要重新渲染组件以进行进一步的断言测试。
客观的
- 想模拟
onclick
函数 - 该
onclick
函数应该进行模拟axios
调用 - 调用应该返回一个
axios
承诺 - 该承诺的解析值应该是传递给模拟
axios
函数的数据 - 组件应该使用新的道具重新渲染
堆
任何帮助深表感谢。
解决方案
查看组件的代码会很有用。从您的测试来看,问题在于更新的逻辑CTAWrapper
存在于其父组件中。如果您在异步代码执行后渲染该组件,则 DOM 应相应更新。
推荐阅读
- javascript - 获得一个 promiseValue
- html - XSLT:组织用于打印的 html 表格
- asp.net-core - .Net Core 2.1 System.IO.FileSystem.DriveInfo
- css - 关于溢出浮动div,margin-right 和left 以不同的方式工作
- java - 缺少 JNI 库
- c++ - gRPC 和 etcd 客户端
- windows - Cortana 不允许我在搜索框中输入超过 2 个字母并挂在 Windows 10 中
- c++ - 工厂方法模式使用继承,而抽象工厂模式使用组合如何?
- iframe - 如何在机器人框架骑行编辑器中从 iframe 标记中定位元素
- javascript - jquery缓冲整个音频文件并准备播放