Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript test with Jest with Enzyme does not recognise components

I have a test for Typescript using Jest with Enzyme. Tests work perfect but when i add a component, it gives me a Unterminated regular expression error

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);
    })
})

When I run yarn test the result on the console is

 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==

The jest configuration inside package.json is

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

Any thoughts on that?

like image 461
Eristikos Avatar asked Dec 02 '22 11:12

Eristikos


2 Answers

ts files are for pure typescript code, and tsx for react (like jsx). Rename the file to tsx

like image 73
gilamran Avatar answered Dec 04 '22 13:12

gilamran


It seems that forgetting to import React caused the issue.

like image 29
Eristikos Avatar answered Dec 04 '22 12:12

Eristikos