I'm trying to test react ponents written in typescript with Jest, but when I run the tests I get this error:

Cannot use JSX unless the '--jsx' flag is provided.

This project needs multiple tsconfig files (one for a node server and another for the client source), so the project is structured like this:

/root
  package.json
  jest.config.js
  /src
    tsconfig.json
  /server
    tsconfig.json

I'm currently only trying to run tests in the src directory. I think the issue is that ts-jest isn't loading the correct tsconfig file, but after browsing their docs, issues, and asking on the slack channel, I can't find any way to either pass the --jsx flag to ts-jest or to specify the tsconfig to use.

Here are the contents of my config files:

/root/jest.config.js

module.exports = {
  roots: [
    '<rootDir>/src',
  ],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '/__tests__/.*\\.test\\.tsx?$',
  moduleFileExtensions: [
    'ts',
    'tsx',
    'js',
    'jsx',
    'json',
    'node',
  ],
  setupFilesAfterEnv: ['jest-enzyme'],
  testEnvironment: 'enzyme',
};

/root/src/tsconfig.json

{
  "pilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ],
    "target": "es2018",
    "lib": ["es2018", "dom"],
    "jsx": "react",
    "moduleResolution": "node",
    "allowJs": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitReturns": true,
    "outDir": "../dist/src",
    "baseUrl": ".",
    "typeRoots": ["./types", "../node_modules/@types"]
  }
}

And my relevant dependencies in package.json

"@types/jest": "^24.0.10",
"@types/enzyme": "^3.9.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.10.0",
"jest": "^24.3.1",
"jest-environment-enzyme": "^7.0.2",
"jest-enzyme": "^7.0.2",
"ts-jest": "^24.0.0",
"ts-node": "^8.0.2",
"typescript": "^3.3.3",
"typescript-styled-plugin": "^0.13.0"

And the test that is failing (located at /root/src/pages/__tests__/index.test.tsx)

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

describe('pages/index', () => {
  test('Should render without error', () => {
    const wrapper = shallow(<IndexPage/>);
  });
});

What am I doing wrong here?

EDIT:

I've got it working in the meantime by just moving root/src/tsconfig.json to root/tsconfig.json. This won't work if I ever want to add tests to the server, but I'll use it until something better es up.

I'm trying to test react ponents written in typescript with Jest, but when I run the tests I get this error:

Cannot use JSX unless the '--jsx' flag is provided.

This project needs multiple tsconfig files (one for a node server and another for the client source), so the project is structured like this:

/root
  package.json
  jest.config.js
  /src
    tsconfig.json
  /server
    tsconfig.json

I'm currently only trying to run tests in the src directory. I think the issue is that ts-jest isn't loading the correct tsconfig file, but after browsing their docs, issues, and asking on the slack channel, I can't find any way to either pass the --jsx flag to ts-jest or to specify the tsconfig to use.

Here are the contents of my config files:

/root/jest.config.js

module.exports = {
  roots: [
    '<rootDir>/src',
  ],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '/__tests__/.*\\.test\\.tsx?$',
  moduleFileExtensions: [
    'ts',
    'tsx',
    'js',
    'jsx',
    'json',
    'node',
  ],
  setupFilesAfterEnv: ['jest-enzyme'],
  testEnvironment: 'enzyme',
};

/root/src/tsconfig.json

{
  "pilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ],
    "target": "es2018",
    "lib": ["es2018", "dom"],
    "jsx": "react",
    "moduleResolution": "node",
    "allowJs": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitReturns": true,
    "outDir": "../dist/src",
    "baseUrl": ".",
    "typeRoots": ["./types", "../node_modules/@types"]
  }
}

And my relevant dependencies in package.json

"@types/jest": "^24.0.10",
"@types/enzyme": "^3.9.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.10.0",
"jest": "^24.3.1",
"jest-environment-enzyme": "^7.0.2",
"jest-enzyme": "^7.0.2",
"ts-jest": "^24.0.0",
"ts-node": "^8.0.2",
"typescript": "^3.3.3",
"typescript-styled-plugin": "^0.13.0"

And the test that is failing (located at /root/src/pages/__tests__/index.test.tsx)

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

describe('pages/index', () => {
  test('Should render without error', () => {
    const wrapper = shallow(<IndexPage/>);
  });
});

What am I doing wrong here?

EDIT:

I've got it working in the meantime by just moving root/src/tsconfig.json to root/tsconfig.json. This won't work if I ever want to add tests to the server, but I'll use it until something better es up.

• javascript
• reactjs
• typescript
• jestjs
• enzyme

Share Follow edited Mar 8, 2019 at 20:44 SimpleJ asked Mar 8, 2019 at 20:28 SimpleJSimpleJ 14.8k1313 gold badges6161 silver badges9696 bronze badges 2

• 1 ts-jest by default look for <root>/tsconfig.json. If you want it to find the file in a different location, use global/ts-jest/tsconfig setting – unional Commented Mar 8, 2019 at 23:11
• @unional Thanks. After a bit more searching, I found that in the docs (guess I didn't look hard enough before posting this). If you want to post that as an answer I'll accept it. – SimpleJ Commented Mar 9, 2019 at 16:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

ts-jest will look for <roodDir>/tsconfig.json by default.

If you want to specify a specific config file, use the global/ts-jest/tsconfig option:

//  package.json/jest or jest.config.json
{
  "globals": {
    "ts-jest": {
      "tsConfig": "<your tsconfig.json file path>"
    }
  }
}

Reference: https://kulshekhar.github.io/ts-jest/user/config/#options