Jest testing with React, Typescript and ES6

Question

I'm having some issues testing a React component written in Typescript(v2.0.3) with Jest(v16.0.1) tests written in ES6.

I'm using the ts-jest(v0.1.8) preprocessor and the relevant part of my package.json looks like

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

But when I run the tests I get:

 FAIL  app/components/__tests__/TestTotalNumberOfTeapots.js
  ● Test suite failed to run

    /Users/aaron/Desktop/teabot_stats/app/components/__tests__/TestTotalNumberOfTeapots.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                             ^^^^^^
    SyntaxError: Unexpected token import

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.673s
Ran all test suites.

My test looks like

import React from 'react';
import TotalNumberOfTeapots from '../TotalNumberOfTeapots.tsx';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <TotalNumberOfTeapots numberOfTeapots='1' />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

I assume I need to have a setup where my components are transpiled from Typescript to ES5 using ts-jest and my tests are transpiled from ES6 to ES5 using babel-jest before Jest reads them but I'm not sure how?

There is now ts-jest which comes with a preprocessor ready to use. — Eddie Groves
– Eddie Groves, Commented Jan 22, 2017 at 0:31

Aaron Kalair · Accepted Answer · 2016-10-16 12:52:37Z

5

Managed to work this out, needed to write my own preprocessor:

const tsc = require('typescript');
const babelJest = require('babel-jest');

module.exports = {
  process(src, path) {
    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
      return tsc.transpile(
        src,
        {
          module: tsc.ModuleKind.CommonJS,
          jsx: tsc.JsxEmit.React,
        },
        path,
        []
      );
    }
    if (path.endsWith('.js') || path.endsWith('.jsx')) {
        return babelJest.process(src, path);
    }
    return src;
  },
};

And update my package.json to have:

  "jest": {
    "scriptPreprocessor": "preprocessor.js",
    "moduleFileExtensions": ["js", "jsx", "json", "ts", "tsx"]
  },

answered Oct 16, 2016 at 12:52

Aaron Kalair

3451 gold badge5 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aobo Cheng Over a year ago

run into "Not Found preprocessor.js",change it to "scriptPreprocessor": "./preprocessor.js"

Karolis.sh Over a year ago

@ObooChin you have to create the preprocessor.js file next to your package.json

Collectives™ on Stack Overflow

Jest testing with React, Typescript and ES6

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related