reactjs - 使用 Jest with Enzyme 的 Typescript 测试无法识别组件

Question

我使用 Jest 和 Enzyme 测试了 Typescript。测试工作完美，但是当我添加一个组件时，它给我一个Unterminated regular expression 错误

import {} from 'jasmine';
import {shallow} from 'enzyme';
import {Show, Hide} from '../components/show_hide';

describe('<Show /> Tests', () => {
    it('Show should render once', () => {
        const component = shallow(<Show />);
        expect(component).toHaveLength(1);
    })
})

当我运行 yarn test 时，控制台上的结果是

 FAIL  __tests__/show_hide.ts
  ● Test suite failed to run

    /path/to/repo/__tests__/show_hide.ts: Unterminated regular expression (4:35)
        2 | describe('<Show /> Tests', () => {
        3 |     it('Show should render once', () => {
      > 4 |         const component = shallow(/>);, expect(component).toHaveLength(1));
          |                                    ^
        5 |     });
        6 | });
        7 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hvd19oaWRlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vX190ZXN0c19fL3Nob3dfaGlkZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sUUFBUSxDQUFDO0FBRy9CLFFBQVEsQ0FBQyxnQkFBZ0IsRUFBRTtJQUMxQixFQUFFLENBQUMsbUJBQW1CLEVBQUU7UUFDdkIsTUFBTSxTQUFTLEdBQUcsT0FBTyxDQUFPLElBQUksRUFDcEMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsQ0FBQSxDQUFDO0lBQ25DLENBQUMsQ0FBQyxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUEifQ==

package.json里面的jest配置是

  "jest": {
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
  },

对此有什么想法吗？

Answer 1

ts 文件用于纯 typescript 代码，而 tsx 用于 react(如 jsx)。 将文件重命名为 tsx