Jest提供了一种模拟函数的方法,如文档中所述
apiGetMethod = jest.fn().mockImplementation(
new Promise((resolve, reject) => {
const userID = parseInt(url.substr('/users/'.length), 10);
process.nextTick(
() => users[userID] ? resolve(users[userID]) : reject({
error: 'User with ' + userID + ' not found.',
});
);
});
);
但是,当在测试中直接调用函数时,这些函数似乎只能工作。
describe('example test', () => {
it('uses the mocked function', () => {
apiGetMethod().then(...);
});
});
如果我有一个如此定义的React组件,我该如何模拟它?
import { apiGetMethod } from './api';
class Foo extends React.Component {
state = {
data: []
}
makeRequest = () => {
apiGetMethod().then(result => {
this.setState({data: result});
});
};
componentDidMount() {
this.makeRequest();
}
render() {
return (
<ul>
{ this.state.data.map((data) => <li>{data}</li>) }
</ul>
)
}
}
我不知道如何制作它Foo
组件调用我的模拟apiGetMethod()
实现,以便我可以测试它是否正确呈现数据。
(这是一个简化的,人为的例子,为了理解如何模拟内部反应组件的函数)
为了清楚起见,编辑:api.js文件// api.js
import 'whatwg-fetch';
export function apiGetMethod() {
return fetch(url, {...});
}
答案 0 :(得分:9)
您必须像这样模拟./api
模块并导入它,以便您可以设置模拟的实现
import { apiGetMethod } from './api'
jest.mock('./api', () => ({ apiGetMethod: jest.fn() }))
测试中的可以使用mockImplementation设置模拟的工作方式:
apiGetMethod.mockImplementation(() => Promise.resolve('test1234'))
答案 1 :(得分:5)
如果来自@ Andreas的答案的jest.mock
方法对您不起作用。您可以在测试文件中尝试以下操作。
const api = require('./api');
api.apiGetMethod = jest.fn(/* Add custom implementation here.*/);
这应该执行您apiGetMethod
组件中Foo
的模拟版本。
答案 2 :(得分:0)
模拟这个的另一个解决方案是:
window['getData'] = jest.fn();
答案 3 :(得分:0)
这里有一个更新的解决方案,适用于在 21 年遇到此问题的任何人。此解决方案使用 Typescript,因此请注意这一点。对于常规 JS,只需在您看到它们的任何地方取出类型调用即可。
在顶部的测试中导入函数
import functionToMock from '../api'
然后您确实在测试之外模拟了对文件夹的调用,以表明从该文件夹调用的任何内容都应该并且将被模拟
[imports are up here]
jest.mock('../api');
[tests are down here]
接下来我们模拟我们正在导入的实际函数。我个人是在测试中这样做的,但我认为它在测试外或在 beforeEach
(functionToMock as jest.Mock).mockResolvedValue(data_that_is_returned);
现在是关键,每个人似乎都陷入了困境。到目前为止,这是正确的,但是在模拟组件内的函数时我们遗漏了一个重要的部分:act
。你可以阅读更多关于它 here 但本质上我们想把我们的渲染包装在这个动作中。 React 测试库有自己的 act
版本。它也是异步的,因此您必须确保您的测试是异步的,并在其外部定义来自 render
的解构变量。
最后你的测试文件应该是这样的:
import { render, act } from '@testing-library/react';
import UserGrid from '../components/Users/UserGrid';
import { data2 } from '../__fixtures__/data';
import functionToMock from '../api';
jest.mock('../api');
describe("Test Suite", () => {
it('Renders', async () => {
(functionToMock as jest.Mock).mockResolvedValue(data2);
let getAllByTestId: any;
let getByTestId: any;
await act(async () => {
({ getByTestId, getAllByTestId } = render(<UserGrid />));
});
const container = getByTestId('grid-container');
const userBoxes = getAllByTestId('user-box');
});
});