Jest按照接收所需参数的顺序模拟jQuery函数数据

Question

中继续前面的问题jest从promise 中模拟jQuery函数

我想知道我是否可以测试添加到dataFunc函数中的属性。

这就是我想要测试的：

1. buttonData-检查它实际上是一个按钮，而不是其他元素
2. url-此参数可以是这样的函数：(url) => url.replace('##a##', 'sometext')
3. 维度-这是一个看起来像这样的对象：{ width: 100, height: 200 }

我不是在找人为我解决这个问题，只是为了给我指明正确的方向

这是函数：

auth( buttonData, url, dimensions ){
return new Promise((resolve, reject) => {
const success = (e, data) => {
resolve({data, error: null});
};
const error = () => {
resolve({data: null, error: 'Error'});
};
jQuery(buttonData).dataFunc({
success,
error,
url,
dimensions 
});
});
}

我知道我可以使用toHaveBeenCalledWith来完成，但我不知道如何模拟我前面在jquery func中提到的params。

这就是我迄今为止所做的。。。我知道这是错误的。。。

test( 'check that service receives the desired variables', async () => {
const approveButton = document.createElement( 'button' );

// I am pretty sure that this is not correct as this mocks the returning data from dataFunc       
global.jQuery = () => {
return {
dataFunc: ( { url, dimenssions } ) => {
url( jest.fn(), ( url ) => url.replace('##a##', 'sometext') );
dimenssions( jest.fn(), { width: 100, height: 200 } );
},
};
};

const service = await service.auth( approveButton, url, dimenssions );

expect( service ).toHaveBeenCalledWith( approveButton, url, dimenssions );
} );

Answer 1

const mockDataFunc = jest.fn()
global.jQuery = (buttonData) => {
return {
dataFunc: (params) => mockDataFunc(buttonData, params),
};
};
expect(mockDataFunc).toBeCalledWith(
expect.any(Object),
expect.objectContaining({
url: expect.stringContaining("something"),
dimenssions: expect.objectContaining({ width: 100, height: 200 })
})
)