reactjs - 用笑话进行单元测试时如何模拟普通对象的依赖关系?
问题描述
在测试我的 ReactJs 助手时,我找不到模拟对象导入的方法。那里的所有示例都展示了如何模拟导入的函数,没有人谈论模拟导入的对象。
我要模拟的这个基础助手对象:
filters-state.helper.ts
:
export const FiltersStateHelper = {
toggleFilters: <T extends FiltersState>(state: T): T => ({
...state,
isOpen: !state.isOpen
})
};
我在我正在测试的状态助手中使用它:
search-view-state.helper.ts
:
import { FiltersStateHelper } from 'shared/filters/helpers/filters-state.helper';
export const SearchViewStateHelper = {
toggleFilters: <T extends SearchViewState>(state: T): T => ({
...state,
filters: FiltersStateHelper.toggleFilters(state.filters)
})
//... more methods
};
在测试中,模拟依赖失败了,可能是因为在我开玩笑说要模拟什么之前,我的助手的依赖已经解决了:
search-view-state.helper.spec.ts
:
import { SearchViewStateHelper as helper } from 'shared/search-view/helpers/search-view-state.helper';
describe('toggleFilters method', () => {
const spy = jest.fn();
jest.doMock('shared/filters/helpers/filters-state.helper', () => {
return {
toggleFilters: spy
};
});
const state = {};
it('should toggle filters', () => {
helper.toggleFilters(state);
expect(spy).toHaveBeenCalled();
});
});
解决方案
您可以使用jest.spyOn(object, methodName, accessType?)来监视对象的toggleFilters
方法FiltersStateHelper
。
例如
filters-state.helper.ts
:
type FiltersState = any;
export const FiltersStateHelper = {
toggleFilters: <T extends FiltersState>(state: T): T => ({
...state,
isOpen: !state.isOpen
})
};
search-view-state.helper.ts
:
import { FiltersStateHelper } from './filters-state.helper';
type SearchViewState = any;
export const SearchViewStateHelper = {
toggleFilters: <T extends SearchViewState>(state: T): T => ({
...state,
filters: FiltersStateHelper.toggleFilters(state.filters)
})
// ... more methods
};
search-view-state.helper.spec.ts
:
import { SearchViewStateHelper as helper } from './search-view-state.helper';
import { FiltersStateHelper } from './filters-state.helper';
describe('toggleFilters method', () => {
const state = { filters: { isOpen: false } };
it('should toggle filters', () => {
const spy = jest.spyOn(FiltersStateHelper, 'toggleFilters');
helper.toggleFilters(state);
expect(spy).toHaveBeenCalled();
expect(spy).toBeCalledWith({ isOpen: false });
});
});
覆盖率 100% 的单元测试结果:
PASS src/stackoverflow/58746881/search-view-state.helper.spec.ts
toggleFilters method
✓ should toggle filters (6ms)
-----------------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------------------------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
filters-state.helper.ts | 100 | 100 | 100 | 100 | |
search-view-state.helper.ts | 100 | 100 | 100 | 100 | |
-----------------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.833s, estimated 8s
源代码:https ://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58746881
推荐阅读
- java - 加法系列在java中给出不同的值
- javascript - Storybook 找不到某些故事
- python - 删除重复的熊猫仍然保留最后两行
- javascript - 在 React js 应用程序中使用 Keycloack 注销用户的问题
- php - 我无法在 PHP 中生成正确的 Json 文件
- java - 如何使用 Spring Boot 发送发布请求?
- reactjs - 如何在 React 中更改外部导入的 SVG 的颜色?
- python - 在 Python 中使用现有代码制作定义函数的建议
- android - 带有插图的 Android 导航栏和状态栏透明度
- javascript - 尝试使用 pdfjs 在 React 中渲染 base64。获取 CSS 错误