React native typescript throws error when running jest test command

Question

I have react native project running with typescript and I am trying to set up tests. I followed this article on how to set it up and everything seems to work until I run the test command.

jest

when a tsx runs file I get this error

test runs but fail becssue jest can't reslove tsx file

TypeScript compiler encountered syntax errors while transpiling. Errors: '}' expected.

  at createTranspilationError (node_modules/ts-jest/dist/transpiler.js:32:12)
  at transpileViaTranspileModule (node_modules/ts-jest/dist/transpiler.js:24:15)
  at Object.transpileTypescript (node_modules/ts-jest/dist/transpiler.js:7:27)
  at process (node_modules/ts-jest/dist/preprocessor.js:27:40)
  at Object.process (node_modules/ts-jest/index.js:8:51)

Any idea what the problem could be?

test case

import React from "react"
import "react-native"
import renderer from "react-test-renderer"
import App from "../App"

test("renders <App /> without crashing", () => {
  const tree = renderer.create(
    <App />,
  )

  expect(tree).toBeDefined()

article https://medium.com/@rintoj/react-native-with-typescript-40355a90a5d7

Updated

Test runs but jest fail because it can't resolve typescript files

error

 FAIL  src/__tests__/App.test.tsx
  ● Test suite failed to run

    /Users/marcussimmesgard/driver-application/src/__tests__/App.test.tsx: Unexpected token (11:54)

      Jest encountered an unexpected token
      This usually means that you are trying to import a file which 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.
      You'll find more details and examples of these config options in the docs:
      https://jestjs.io/docs/en/configuration.html
      Details:
         9 | const react_1 = __importDefault(require("react"));
        10 | test('renders correctly', () => {
      > 11 |     const tree = react_test_renderer_1.default.create(<App_1.default />);
           |                                                       ^
        12 |     expect(tree).toBeDefined();
        13 | });

Can you post the whole file or at least the whole test call? It looks like you have a syntax error (missing }) — SrThompson

ajthyng ajthyng · Accepted Answer · 2018-07-17T13:46:58

It looks like your code is based on the snippet towards the bottom of the article:

import 'react-native'
import renderer from 'react-test-renderer'
import { App } from './app'
import React from 'react'

test('renders correctly', () => {
  const tree = renderer.create(
    <App />
  )
  expect(tree).toBeDefined()
})

If your code matches what you copied into your question, then you are missing a closing } and a closing ).

React native typescript throws error when running jest test command

1 Answers