[英]React: How to cover dynamic imports in Jest tests?
so I have a react component that uses:所以我有一个使用的反应组件:
const MyPage = DynamicImport({
id: 'MyPage',
loader: () => import('./pages/MyPage/MyPageWrapper'),
});
and jest complains that my test isn't covering the loader, line 22:并且开玩笑抱怨我的测试没有涵盖加载程序,第 22 行:
then this is used later on the same file:然后稍后在同一个文件中使用它:
const tabs = useMemo(
() => [
{
label: 'myPage',
url: 'myRoute',
component: MyPage,
},
...
and finally最后
{tabs.map(({ url, component }) => {
return <Route path={url} component={component} key={url} />;
})}
I am learning how to write unit tests and I have no clue how to cover this piece in red lines on the screenshot, I've been obviously googling and searching for an answer but I couldn't find anything useful.我正在学习如何编写单元测试,但我不知道如何在屏幕截图上用红线覆盖这部分,显然我一直在谷歌搜索和寻找答案,但我找不到任何有用的东西。
This is my test file:这是我的测试文件:
import React from 'react';
import { MyComponent } from '../MyComponent';
import { makeSetupComponent } from '../../../../test_utils';
const MyPage = () => ({
id: '',
loader: jest.fn(),
});
jest.mock('../pages/MyPage/MyPageWrapper', () => {
return {
MyPageWrapper: jest.fn(),
};
});
const defaultProps = {
...
};
const setup = makeSetupComponent({
props: defaultProps,
shallow: true,
component: MyComponent,
});
describe('MyComponent component', () => {
test('Renders correctly', () => {
const { component } = setup();
expect(component.exists()).toBe(true);
});
test('render MyPage', () => {
const { component } = setup({ shallow: false });
console.log('###DEBUG', component.debug());
console.log('###MyPage', MyPage);
const { loader } = MyPage();
loader();
expect(MyPage).toBeInstanceOf(Function);
expect(loader).toHaveBeenCalled();
});
});
Any help/suggestions/links/courses-that-cover-exactly-this would be highly appreciated任何帮助/建议/链接/课程 - 完全覆盖 - 这将不胜感激
Here is the unit test solution:这是单元测试解决方案:
DynamicImport.ts
: DynamicImport.ts
:
export async function DynamicImport({ id, loader }) {
console.log('real implementation');
return loader();
}
MyPageWrapper.ts
export function MyPageWrapper() {
return 'MyPageWrapper';
}
index.ts
: index.ts
:
import { DynamicImport } from './DynamicImport';
export function main() {
return DynamicImport({
id: 'MyPage',
loader: () => import('./MyPageWrapper'),
});
}
index.test.ts
: index.test.ts
:
import { main } from './';
import { DynamicImport } from './DynamicImport';
import { mocked } from 'ts-jest/utils';
jest.mock('./DynamicImport', () => {
return {
DynamicImport: jest.fn(),
};
});
jest.mock('./MyPageWrapper', () => ({
__esModule: true,
default: 'mocked MyPageWrapper',
}));
describe('62161452', () => {
it('should pass', async () => {
mocked(DynamicImport).mockImplementationOnce(({ id, loader }) => {
console.log('mocked implementation');
return loader();
});
const actual = (await main()).default;
expect(actual).toBe('mocked MyPageWrapper');
expect(DynamicImport).toBeCalledWith({ id: 'MyPage', loader: expect.any(Function) });
});
});
unit test result with coverage report:带有覆盖率报告的单元测试结果:
PASS stackoverflow/62161452/index.test.ts (9.149s)
62161452
✓ should pass (32ms)
console.log
mocked implementation
at Object.<anonymous> (stackoverflow/62161452/index.test.ts:19:15)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.ts | 100 | 100 | 100 | 100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 10.178s
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.