Circleci built in test fails with typescript

Build Environment
1

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 :sob:

1 Like
2

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?

3

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.

4

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

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

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

5

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 covers the issue you are having.

6

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?

7

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.

8

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

9

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

10

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.

11

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

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

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

12

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.

13

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

1 Like
14

@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

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!

1 Like
15

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

Happy testing!

16

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

17

hmmmm not bad, the only thing is that I don’t like Karma :sweat_smile:but it does look good for those that are interested. :vampire:t3:‍♂

18

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