# Circleci built in test fails with typescript

**URL:** <https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323>\
**Category:** Build Environment\
**Tags:** angular\
**Created:** [March 27, 2019, 4:03pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323 "2019-03-27T16:03:43Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![ctfrancia](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/ctfrancia/32/21797_2.png) [@ctfrancia](https://discuss.circleci.com/u/ctfrancia)\
**Post date:** [March 27, 2019, 4:03pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/1 "2019-03-27T16:03:43Z")

</div>

Right, so I have jest running tests for my back end. I just set up circleci and _finally_ got to where it will run my tests. It passes the tests that I had written (with jest) however, it is failing at typescript in the built in Angular Karma tests.

```
SyntaxError: /home/circleci/project/application/app/src/app/group-chats/group-chats.component.spec.ts: Unexpected token, expected ";" (7:15)

   5 | 
   6 | describe('GroupChatsComponent', () => {
> 7 | let component: GroupChatsComponent;
     | ^
   8 | let fixture: ComponentFixture<GroupChatsComponent>;
   9 | 
  10 | beforeEach(async(() => {

```

I have 8 Angular components and all of the components have this same error in the circleci when running the “test” part.

Sorry if this has been answered, I really did try and find the solution before asking 😭

---

<div class="post-metadata">

**Author:** ![drazisil](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/drazisil/32/24029_2.png) [@drazisil](https://discuss.circleci.com/u/drazisil)\
**Post date:** [March 27, 2019, 4:07pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/2 "2019-03-27T16:07:54Z")

</div>

Hi Christian. I often see this when Node doesn’t like to see TypeScript. What version of node are you running, and are you using `ts-jest` or compiling first?

---

<div class="post-metadata">

**Author:** ![ctfrancia](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/ctfrancia/32/21797_2.png) [@ctfrancia](https://discuss.circleci.com/u/ctfrancia)\
**Post date:** [March 27, 2019, 4:10pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/3 "2019-03-27T16:10:23Z")

</div>

Hi @drazisil thanks for the fast reply!  
`$ node -v` v10.15.3  
as for `ts-jest` I am not sure. As I was following along with _Coding Train_’s tutorial and was integrating his tutorial with my Angular project.

---

<div class="post-metadata">

**Author:** ![drazisil](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/drazisil/32/24029_2.png) [@drazisil](https://discuss.circleci.com/u/drazisil)\
**Post date:** [March 27, 2019, 4:12pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/4 "2019-03-27T16:12:28Z")

</div>

Hmm. Try adding `ts-jest` to your project and then add

```auto
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },

```

To your jest config. Mine’s in my package.json file, but yours may be in a separate file.

---

<div class="post-metadata">

**Author:** ![drazisil](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/drazisil/32/24029_2.png) [@drazisil](https://discuss.circleci.com/u/drazisil)\
**Post date:** [March 27, 2019, 4:16pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/5 "2019-03-27T16:16:23Z")

</div>

Oh, you said Karma. My thoughts above probably don’t matter. Let me do some searching.

EDIT: Not the same error, but I believe [https://stackoverflow.com/questions/38461421/karma-webpack-babel-loader-es6-unexpected-token-import](https://stackoverflow.com/questions/38461421/karma-webpack-babel-loader-es6-unexpected-token-import) covers the issue you are having.

---

<div class="post-metadata">

**Author:** ![ctfrancia](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/ctfrancia/32/21797_2.png) [@ctfrancia](https://discuss.circleci.com/u/ctfrancia)\
**Post date:** [March 27, 2019, 4:19pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/6 "2019-03-27T16:19:01Z")

</div>

I tried your way since after reading over `ts-jest` it looks like it is made for typescript so just incase… or is `ts-jest` just made for if using typescript in the backend?

---

<div class="post-metadata">

**Author:** ![drazisil](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/drazisil/32/24029_2.png) [@drazisil](https://discuss.circleci.com/u/drazisil)\
**Post date:** [March 27, 2019, 4:20pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/7 "2019-03-27T16:20:48Z")

</div>

`ts-jest` allows `jest` to read the test and source files while they are still typescript without needing to compile them first. This is what karma is having an issue with too, It’s trying to read the test file as javascript and failing.

---

<div class="post-metadata">

**Author:** ![ctfrancia](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/ctfrancia/32/21797_2.png) [@ctfrancia](https://discuss.circleci.com/u/ctfrancia)\
**Post date:** [March 27, 2019, 4:22pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/8 "2019-03-27T16:22:49Z")

</div>

Ah, gotcha, this sounds like a quick fix in the circleci config file no?

---

<div class="post-metadata">

**Author:** ![drazisil](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/drazisil/32/24029_2.png) [@drazisil](https://discuss.circleci.com/u/drazisil)\
**Post date:** [March 27, 2019, 4:24pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/9 "2019-03-27T16:24:19Z")

</div>

It’s more going to be in your config files. This works locally you say?

---

<div class="post-metadata">

**Author:** ![ctfrancia](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/ctfrancia/32/21797_2.png) [@ctfrancia](https://discuss.circleci.com/u/ctfrancia)\
**Post date:** [March 27, 2019, 4:28pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/10 "2019-03-27T16:28:50Z")

</div>

I have a front end (angular) in one file path, and then in another I have my backend (Koa and Jest). I don’t have Jest going over the front end (because of Karma) So what it sounds like is when circleci reaches the `npm test ` section circleci tells Jest to read Karma’s tests as its own, and interprets it as it’s own. Because I only wrote (in the back end) 2 tests, but when circleci runs the tests I get:

> Test Suites: 8 failed, 2 passed, 10 total  
> Tests: 3 passed, 3 total  
> Snapshots: 0 total  
> Time: 3.341s

the 2 passing are the ones that I wrote with Jest for Koa.

---

<div class="post-metadata">

**Author:** ![drazisil](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/drazisil/32/24029_2.png) [@drazisil](https://discuss.circleci.com/u/drazisil)\
**Post date:** [March 27, 2019, 4:31pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/11 "2019-03-27T16:31:21Z")

</div>

Ah. Then you will want to adjust your jest config to not look at the tests for the frontend.

```auto
    "testPathIgnorePatterns": [
      "<rootDir>/dist/",
      "<rootDir>/node_modules/"
    ]

```

Find (or add) that section to your jest config and add the part where your Karma tests are.

---

<div class="post-metadata">

**Author:** ![ctfrancia](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/ctfrancia/32/21797_2.png) [@ctfrancia](https://discuss.circleci.com/u/ctfrancia)\
**Post date:** [March 27, 2019, 4:35pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/12 "2019-03-27T16:35:18Z")

</div>

Alright, I’ll try and figure that out. I am new to the realm of testing and CI so I’m not sure how to setup that config folder correctly.

---

<div class="post-metadata">

**Author:** ![drazisil](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/drazisil/32/24029_2.png) [@drazisil](https://discuss.circleci.com/u/drazisil)\
**Post date:** [March 27, 2019, 4:40pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/13 "2019-03-27T16:40:10Z")

</div>

Happy to help in any way we can! Welcome to testing and CI 🙂

---

<div class="post-metadata">

**Author:** ![ctfrancia](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/ctfrancia/32/21797_2.png) [@ctfrancia](https://discuss.circleci.com/u/ctfrancia)\
**Post date:** [March 27, 2019, 4:54pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/14 "2019-03-27T16:54:47Z")

</div>

@drazisil it works! ALL GREEN!!!  
**Problem**  
since circleci is running at the top level and jest is set in my package.json as the test dependency, when performing a push to the branch and circleci was running the `- npm test` from the config.yml file it was telling Jest to run all the tests. And because jest will see the extention `.spec.js` or `.test.js` as it’s own file and jest was reading the typescript file as JavaScript

**SOLUTION**  
_easiest_: go to your package.json and add this:

```
  "jest": {
    "testPathIgnorePatterns": [
      "<rootDir>/build/",
      "<rootDir>/node_modules/",
      "<rootDir>/application/"
    ]
  },

```

additionally, if there are more files then just add a comma and add the more information [here](https://jestjs.io/docs/en/configuration.html#testpathignorepatterns-array-string)

others would be have all your ts files as `.ts` or `.tsx` (but I didn’t test this)

Hopefully this was a good explanation for any other newbies like me as to resolving this issue!

---

<div class="post-metadata">

**Author:** ![drazisil](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/drazisil/32/24029_2.png) [@drazisil](https://discuss.circleci.com/u/drazisil)\
**Post date:** [March 27, 2019, 5:12pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/15 "2019-03-27T17:12:38Z")

</div>

Thank you for that well-written and detailed answer, that should be helpful to others.

Happy testing!

---

<div class="post-metadata">

**Author:** ![drazisil](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/drazisil/32/24029_2.png) [@drazisil](https://discuss.circleci.com/u/drazisil)\
**Post date:** [March 28, 2019, 12:41pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/16 "2019-03-28T12:41:14Z")

</div>

@ctfrancia Since Google watches everything I search for, it just suggested [https://www.npmjs.com/package/karma-typescript](https://www.npmjs.com/package/karma-typescript) to me, which I thought might interest you 🕶

---

<div class="post-metadata">

**Author:** ![ctfrancia](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/ctfrancia/32/21797_2.png) [@ctfrancia](https://discuss.circleci.com/u/ctfrancia)\
**Post date:** [March 28, 2019, 3:34pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/17 "2019-03-28T15:34:25Z")

</div>

hmmmm not bad, the only thing is that I don’t like Karma 😅but it does look good for those that are interested. 🧛🏼‍♂

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/circleci/original/3X/5/1/511608acda8e85906e15909b57bd0a46c1dbe291.png) [@system](https://discuss.circleci.com/u/system)\
**Post date:** [April 7, 2019, 3:34pm UTC](https://discuss.circleci.com/t/circleci-built-in-test-fails-with-typescript/29323/18 "2019-04-07T15:34:29Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.