测试umi页面报错： (0 , _umi.connect) is not a function

[zhangxiangqiang]

What happens?

umi项目，当我用enzyme 进行单元测试时，引入了使用umi.connect 包裹的组件，会报错，无法进行测试

最小可复现仓库

import React from 'react';
import { shallow, configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { matchMedia } from '@/utils/utilsTest';
import workbench from './index';

configure({ adapter: new Adapter() });
console.log(workbench, 999)
beforeAll(() => {
matchMedia();
});

describe('', () => {
it('渲染基本UI', () => {
// const $ = shallow();
// expect($.find('Select').length).toBe(1);
});

});

请使用 yarn create @umijs/umi-app 创建，并上传到你的 GitHub 仓库

复现步骤，错误日志以及相关配置

● Test suite failed to run

TypeError: (0 , _umi.connect) is not a function

  218 | };
  219 | 
> 220 | export default connect(({ workbench, loading }: ConnectState & WorkbenchProps) => ({
      |                ^
  221 |   workbench,
  222 |   loadingDetail: loading.effects[API.query],
  223 | }))(Workbench);

  at Object.<anonymous> (src/pages/kms/workbench/index.tsx:220:16)
  at Object.<anonymous> (src/pages/kms/workbench/index.test.ts:5:1)

相关环境信息

• Umi 版本：^3.2.9
• Node 版本：v12.18.1
• 操作系统：mac OS

[nedosa]

I've come across this issue also trying to write a test for an ant-design-pro component. Is there an example of how the dva-plugin needs to be initialised within a test in order to make this work ?

It's a pity to not have unit tests for connect-enabled components, it will improve app reliability a lot. Any help greatly appreciated.

[sonce]

` FAIL src/pages/user/Login/index.test.tsx (6.028 s)
● Calculator tests › Login

TypeError: (0 , _umi.request) is not a function`

[vinzid]

` FAIL src/pages/user/Login/index.test.tsx (6.028 s)
● Calculator tests › Login

TypeError: (0 , _umi.request) is not a function`

A quick solution:
import request from 'umi-request'
to substitute for
import { request } from 'umi'

[AsserHong]

I got the same problem, then I found a solution to reslove it.
moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1', '^@@/(.*)$': '<rootDir>/src/.umi/$1', },
add it in my jest.config.js then it works

[sajjadshahi]

Thanks @AsserHong, however I still got the issue. Any other ideas?

[AsserHong]

@sajjadshahi hi, I think u still got the issue because the .umi folder is not exist in ur test enviroment. So, I suggest u can try to mock the connect method with jest, like this
jest.mock('umi', () => { const originModule = jest.requireActual('umi'); return { ...originModule, connect: () => component => ({ WrappedComponent: component, }), }; });
I wish it will help u

[sajjadshahi]

@AsserHong I've been trying this too. But there are many modules there in Ant Design Pro which I should mock following this solution. As @vinzid mentioned above, useIntl() , request and many others. Did you try to configure the tests in Ant Design Pro?

As well, testing the whole redux is my approach. We might need to check if an action is properly dispatched and changed the store in our test case. I wish there could have been a good boilerplate with some tests.

[DaYesahh]

@AsserHong Where should I put this codes?

[AsserHong]

@AsserHong Where should I put this codes?

in the jest.config.js file

[DaYesahh]

@AsserHong Pi! I have already fixed this problem by this way. I put codes in the setupfiles.

[DaYesahh]

I have already fixed this problem by this way. I put codes in the setupfiles or the test file.
And here is my codes:
function mockUmi() {
const original = jest.requireActual('umi');
return {
...original,
useSelector: (callback: any) => {
return callback;
},
};
}
jest.mock('umi', () => mockUmi());

If you need the function or attribute, just rewrite it! Following it's feature!

[AsserHong]

I have already fixed this problem by this way. I put codes in the setupfiles or the test file.
And here is my codes:
function mockUmi() {
const original = jest.requireActual('umi');
return {
...original,
useSelector: (callback: any) => {
return callback;
},
};
}
jest.mock('umi', () => mockUmi());

If you need the function or attribute, just rewrite it! Following it's feature!

That's really a good solution

[jyjin]

Same question, I am focus the issue too. Error like this:

TypeError: (0 , _umi.useRequest) is not a function

I have tried import umi by jest.mock and jest.requireActual('umi') like your guy's solution but nothing change, the only difference is my situation is use useRequest from umi. But I think the root cause is same to 'connect'.

Hope someone can give some suggestions~

[jyjin]

The solution moduleNameMapper also not useful for me

 moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@@/(.*)$': '<rootDir>/src/.umi/$1',
    '\\.(css|less)$': 'identity-obj-proxy',
  },

Bellow is my testing

import { Link, useRequest } from 'umi'; // moduleNameMapper do nothing
// if use alias in my source code like this
import { useRequest } from '@@/core/umiExports' // moduleNameMapper redirect to .umi works

So, I guess the moduleNameMapper just effective for your source code but not works to your denpendency alias( which used @or @@ alias in node_modules, such as umi)

umi/types.d.ts

// @ts-ignore
export * from '@@/core/umiExports';
export * from './lib/cjs';

As I said, moduleNameMapper even not a good temp solution for this issue, So sad...

And now I have a temp solution, just for developing test

edit your `node_modules/umi/type.d.ts

// @ts-ignore
export * from '@@/core/umiExports'; 
export * from './lib/cjs';

---

---

change export * from '@@/core/umiExports'; to export * from '../../src/.umi/core/umiExports';

---

---

Now， you can pass all your jest blocking code cause like this

import { XXX } from 'umi';
// TypeError: (0 , _umi.XXX) is not a function

[jyjin]

邮件我已收到，谢谢！