javascript - Jest 不能使用 js 文件中的 HOC，但可以正确使用 tsx 文件中的 HOC

Question

当我从 tsx 文件导入 HOC 时，一切正常。但是当我将扩展名更改为 js 时，我看到一个 Jest 错误:

Jest encountered an unexpected token. This usually means that you are trying to import a file that Jest cannot parse, e.g. it's not plain JavaScript.

  By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
  Here's what you can do:
   • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
   • If you need a custom transformation specify a "transform" option in your config.
   • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

我的 jest.config.js:

module.exports = {
  automock: false,
  preset: 'ts-jest/presets/js-with-babel',
  setupTestFrameworkScriptFile: '<rootDir>/_internals/jest/setup.js',
  moduleNameMapper: {
    '\\.(less|svg|png|css|pdf|woff|woff2)$': 'identity-obj-proxy',
    ...mappers,
  },
  testPathIgnorePatterns: ['/node_modules/', '/lib/', '/dist/', '/.tmp/', '/git/'],
  testMatch: null,
  testRegex: '/tests/[a-zA-z-_]+\\.spec\\.(tsx|ts)$',
  moduleDirectories: ['node_modules'],
  moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
};

我的 HOC:

export function myHOC(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
        actions();
      }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

export default myHOC;

我的测试:

import * as React from 'react';
import { shallow } from 'enzyme';
import { Component } from '..';

jest.mock('myHOC', () => jest.fn());

describe('Component', () => {
  beforeEach(() => {
    wrapper = shallow(<Component data={undefined} />);
  });
  it('should return null if there are no data', () => {
    expect(wrapper.html()).toBe(null);
  });
});

.babelrc

{
  "env" : {
    "test" : {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

我该如何解决这个问题？

Answer 1

你可以在ts-jest中看到文档表明您当前使用的预设将让 babel 处理 .js 文件

ts-jest/presets/js-with-babel: TypeScript files will be handled by ts-jest, and JavaScript files will be handled by babel-jest.

所以你应该:

添加@babel/preset-react

这将转换所有的 jsx

.babelrc

{
  "presets": ["@babel/preset-react"]
  "env" : {
    "test" : {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

或

使用 ts-jest/presets/js-with-ts

如果需要的话添加

tsconfig.json

{
 //...
 allowJs: true
}

编辑:如果您的应用程序在 myHOC 为 .js 时正常运行，您可能应该选择第二个选项