Writing tests with Typescript

Get Help
1

Hi, I am trying to add Unit tests to my project, but I am having trouble integrating the tests with typescript. I set up a fresh project with lng create to try to pinpoint the issue. Any help would be appreciated.

This is the error I see when I try to run the tests.

Screenshot 2022-12-05 at 4.48.19 PM
Screenshot 2022-12-05 at 4.48.19 PM1684×754 101 KB

This is what I have in my package.json:

{
  ...
  "dependencies": {
    "@lightningjs/sdk": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-typescript": "^7.18.6",
    "@types/jest": "^29.2.4",
    "babel-jest": "^29.3.1",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.3.1",
    "jest-webgl-canvas-mock": "^0.2.3",
    "ts-jest": "^29.0.3",
    "typescript": "^4.7.4"
  }
}

babel.config.js:

module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}], '@babel/preset-typescript'],
  env: {
    test: {
      plugins: [
        '@babel/plugin-transform-modules-commonjs',
      ]
    }
  }
};

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build-ts",
    "target": "ES2019",
    "lib": ["ES2019", "DOM"],
    "moduleResolution": "node",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "module": "commonjs",
    "esModuleInterop": true,
  }
}

jest.config.js

module.exports = {
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    resources: 'usable',
  },
  setupFiles: ['jest-webgl-canvas-mock'],
  moduleNameMapper: {
    '^src(.*)': '<rootDir>/src$1',
    '^test(.*)': '<rootDir>/test$1',
  },
  preset: 'ts-jest',
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    '^.+\\.[m|t]?js$': 'babel-jest',
  },
  transformIgnorePatterns: [],
};

App.test.js is copied straight from the docs. Thanks!

2

That is actually a runtime error and nothing to do with TypeScript. Although if you’re having this issue when using TypeScript but not otherwise then something must be going on.

Would you be able to put your example up on a GitHub repo for us to look at?

3

Sure! Repo is here: GitHub - sca4cs/lightning-ts-example

4

Thanks for that! I tracked down the issue and it does seem like something introduced with our TypeScript changes (though not really related to TypeScript definitions or code at all).

Here’s the PR if you’d like to keep track of it:

5

Awesome, thanks for tracking that down! Once the PR is merged, how would I update my project to include the fix?

6

We’re still figuring out when we are going to release this patch. But once it is released it should just need an npm update.

1 Like
7

Hello! Any updates on when this will be merged?