Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jest test on typescript file syntax error: "interface is a reserved word in strict mode"

My Branch: https://github.com/Futuratum/moonholdings.io/tree/JestTests

Current PR: https://github.com/Futuratum/moonholdings.io/pull/29

enter image description here

My Astronaut.tsx component

import React from 'react';

import { moonHoldings } from '../../shared/models';
import { astronaut } from '../../styles';

const { AstronautContainer, Heading } = astronaut;

interface LogoCheck {
  showLogo: boolean;
}

export default (showLogo: LogoCheck) =>  (
  <AstronautContainer>
    { showLogo.showLogo === true ? <Heading>{moonHoldings}</Heading> : null }
    <img src="static/astronaut.png" alt="astronaut" />
  </AstronautContainer>
);

The simple test:

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

import Astronaut from '../components/Astronaut/Astronaut.tsx';

describe('<Astronaut /> component', () => {
  console.log('Astronaut', Astronaut);
  describe('when rendering', () => {
    const wrapper = shallow(<Astronaut showLogo={true} />);

    it('should render a component matching the snapshot', () => {
      const tree = toJson(wrapper);
      expect(tree).toMatchSnapshot();
      expect(wrapper).toHaveLength(1);
    });
  });
});

SyntaxError: /Users/leongaban/projects/Futuratum/moonholdings.io/components/Astronaut/Astronaut.tsx: interfaceis a reserved word in strict mode (8:0)

enter image description here

I tried changing strict to false in my tsconfig's compilerOptions but that did not help.

Anyone else run into this with Jest testing and Typescript?


package.json

{
  "name": "moonholdings.io",
  "version": "2.0.0",
  "description": "Moonholdings.io",
  "main": "index.ts",
  "scripts": {
    "dev": "next -p 7777",
    "build": "next build",
    "start": "next start -p 8000",
    "test": "NODE_ENV=test jest --watch",
    "test-win": "SET NODE_ENV=test&& jest --watch",
    "heroku-postbuild": "next build"
  },
  "author": "Futuratum",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "apollo-boost": "^0.1.16",
    "apollo-client": "^2.4.2",
    "decko": "^1.2.0",
    "downshift": "^2.2.3",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "graphql": "^14.0.2",
    "graphql-tag": "^2.9.2",
    "graphql-tools": "^4.0.0",
    "lodash.debounce": "^4.0.8",
    "next": "^7.0.2",
    "next-with-apollo": "^3.1.3",
    "node-sass": "^4.11.0",
    "nprogress": "^0.2.0",
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-adopt": "^0.6.0",
    "react-apollo": "^2.2.1",
    "react-dom": "^16.7.0",
    "react-transition-group": "^2.5.0",
    "styled-components": "^3.4.9",
    "tslint": "^5.12.1",
    "tslint-react": "^3.6.0",
    "typescript": "^3.2.4",
    "waait": "^1.0.2"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/preset-typescript": "^7.1.0",
    "@types/enzyme": "^3.1.15",
    "@types/jest": "^23.3.13",
    "@types/next": "^7.0.6",
    "@types/react": "^16.7.20",
    "@types/react-dom": "^16.0.11",
    "@types/react-redux": "^7.0.0",
    "@types/zeit__next-typescript": "^0.1.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-plugin-styled-components": "^1.7.1",
    "casual": "^1.5.19",
    "enzyme-to-json": "^3.3.4",
    "jest": "^23.6.0",
    "jest-transform-graphql": "^2.1.0"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
    "testPathIgnorePatterns": [
      "<rootDir>/.next/",
      "<rootDir>/node_modules/"
    ],
    "transform": {
      "\\.(gql|graphql)$": "jest-transform-graphql",
      ".*": "babel-jest",
      "^.+\\.js?$": "babel-jest"
    }
  }
}

My .babelrc file

{
  "env": {
    "development": {
      "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
      ],
      "plugins": [
        [
          "styled-components",
          {
            "ssr": true,
            "displayName": true
          }
        ],
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ]
      ]
    },
    "production": {
      "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
      ],
      "plugins": [
        [
          "styled-components",
          {
            "ssr": true,
            "displayName": true
          }
        ],
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ]
      ]
    },
    "test": {
      "presets": [
        [
          "next/babel",
          {
            "preset-env": {
              "modules": "commonjs"
            }
          }
        ]
      ],
      "plugins": [
        [
          "styled-components",
          {
            "ssr": true,
            "displayName": true
          }
        ]
      ]
    }
  }
}
like image 828
Leon Gaban Avatar asked Jan 23 '19 20:01

Leon Gaban


People also ask

Is it possible to implement mock implementation with typescript?

However, this will not work with TypeScript. It will show a compile error similar to “Property ‘mockImplementation’ does not exist on type ‘typeof ClassB’.ts”. Instead, you can use jest.spyOn on ClassB.prototype.

How to pass an invalid type as an argument in typescript?

By TypeScript’s nature, passing an invalid type as an argument to function A will throw a compile error because the expected and actual argument types are incompatible. However, if you want to test function A by passing an invalid type, you can type cast the argument as any to avoid compile errors. functionA (data: TypeB) { ...

Is typescript a good programming language to learn?

TypeScript is a very popular language… | by Do-Yup Lim | Nerd For Tech | Medium TypeScript is a very popular language that behaves as a typed superset of JavaScript. As you write your new Node.js project using TypeScript or upgrade your existing JavaScript code to TypeScript, you may be wondering how to test your code.


1 Answers

Ok after I added this @babel/preset-typescript into my presets, that error went away:

"test": {
  "presets": [
    "@babel/preset-typescript",  // <---
    [
      "next/babel",
      {
        "preset-env": {
          "modules": "commonjs"
        }
      }
    ]
  ],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ]
  ]
}
like image 146
Leon Gaban Avatar answered Oct 16 '22 12:10

Leon Gaban