umi-test 报 TypeError: Cannot read property 'createElement' of undefined 错误

[arvinxx]

测试文件 UnitSelector.test.tsx 如下

import React from 'react';
import { shallow } from 'enzyme';
import App from '../App';

const wrapper = shallow(<App  />);


it('render', () => {
  expect(wrapper.find('.container').length).toEqual(1);
});

报错如下

components/__test__/UnitSelector.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read property 'createElement' of undefined

      3 | import App from '../UnitSelector';
      4 | 
    > 5 | const wrapper = shallow(<App changeUnit={() => {}} />);
        |                         ^
      6 | 
      7 | // const { wrapper, props } = setup();
      8 | 

      at Object.<anonymous> (components/__test__/UnitSelector.test.tsx:5:25)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.179s
Ran all test suites.
(node:3706) UnhandledPromiseRejectionWarning: Error: Jest failed
    at _jest.default.runCLI.then.result (/Users/ice/CodeProjects/digital-currency-calc/node_modules/umi-test/lib/index.js:65:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
(node:3706) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:3706) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

自行配置了一下 jest.config.js如下

module.exports = {
  moduleNameMapper: {
    '\\.(css|less|sass|scss)$': require.resolve('identity-obj-proxy'),
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '@/(.*)$': '<rootDir>/$1',
  },
};

相关依赖版本如下

icedeMacBook-Pro:111 ice$ npx umi -v --verbose
[email protected]
darwin x64
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected] (/Users/ice/CodeProjects/111/node_modules/react)
[email protected] (/Users/ice/CodeProjects/111/node_modules/react-dom)
[email protected] (/Users/ice/CodeProjects/111/node_modules/react-router)
[email protected] (/Users/ice/CodeProjects/111/node_modules/react-router-dom)
[email protected] (/Users/ice/CodeProjects/111/node_modules/dva)
[email protected]
[email protected]
[email protected]

请问是什么原因？

PS：可复现 repo : https://github.com/arvinxx/umi-test-problem

[dilidili]

tsconfig.json 中使用 esModuleInterop: true 替代 allowSyntheticDefaultImports: true
Ref: https://github.com/kulshekhar/ts-jest/issues/632

[sorrycc]

试试楼上的方法，有问题再 reopen 。

[wanghaomayu]

@sorrycc 亲测有用

[Ma63d]

项目中也遇到同样问题，记录一下避免大家踩坑。项目前端运行可以通过 allowSyntheticDefaultImports 来避免硬书写 import * as React 的写法，但是 ts-jest 从 v23 起不支持 allowSyntheticDefaultImports, 只支持用 esModuleInterop 来解决同样问题: kulshekhar/ts-jest#632，所以需要楼上 esModuleInterop: true 的配置。

[ycjcl868]

+1，是最近 ts-jest 升级导致。解法是：写一个

// jest.config.js
{
  globals: {
    window: true,
    NODE_ENV: "test",
    "ts-jest": {
-      tsConfig: "./tsconfig.json"
+      tsConfig: "./tsconfig.jest.json"
    }
  },
}

// tsconfig.jest.json
+ {
+   "extends": "./tsconfig.json",
+   "compilerOptions": {
+     "esModuleInterop": true
+   }
+ }

就 ok 了。