Getting started with Typescript, React and Jest

ts-jest.md

Getting Started

1. Install:

• jest: npm install --save-dev jest
• ts-jest: npm install --save-dev ts-jest @types/jest

2. Modify package.json

"jest": {
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ]
},
"scripts": {
  "test": "jest"
}

3. Running tests npm test

4. Ensuring tests are excluded from webpack

Modify webpack.config.js

{ test: /\.tsx?$/, exclude: /\.test.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },

Writing the Tests

Test Setup

modify package.json to the appropriate location of your setup file eg. ClientApp/setupTests.ts

"jest": {
    ...
    "setupTestFrameworkScriptFile": "<rootDir>/ClientApp/setupTests.ts",
    ...
}

Snapshot tests

i. Install react-test-renderer

npm install --save-dev react-test-renderer @types/react-test-renderer

ii. Write your tests!

import * as React from "react";
import * as renderer from "react-test-renderer";
import { SubjectToBeTested } from "./SubjectToBeTested";

it("SubjectToBeTested renders correctly", () => {
  const props = { className: "test", value: true, onSelectChanged: (value: boolean) => { return; } };
  const tree = renderer
    .create(<SubjectToBeTested {...props} />)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

DOM tests

i. Install Enzyme:

npm install --save-dev enzyme @types/enzyme
npm install --save-dev enzyme-adapter-react-16 @types/enzyme-adapter-react-16

ii. Modify setupTests.ts

import { configure } from "enzyme";
import React16Adapter from "enzyme-adapter-react-16";

configure({ adapter: new React16Adapter() });

iii. Write your tests!

import {shallow} from "enzyme";
import * as React from "react";
import { SubjectToBeTested } from "./SubjectToBeTested";

it("SubjectToBeTested calls onSelectChanged", () => {
  let newValue = false;
  const props = { className: "test", value: true, onSelectChanged: (value: boolean) => { newValue = value; } };
  const sut = shallow(<SubjectToBeTested {...props} />);

  sut.find("select").simulate("change", {target: { value : "true"}});
  expect(newValue).toEqual(true);
  sut.find("select").simulate("change", {target: { value : "false"}});
  expect(newValue).toEqual(false);
});

Configuring for VSTS

1. Install jest-junit: npm install --save-dev jest-junit
2. Update Jest config package.json

 "jest": {
    "testResultsProcessor": "jest-junit",
    ...
 }

3. Ensure junit.xml is excluded via .gitignore ;)
4. Add npm task to the build

• Command: custom
• Command and arguments: test

5. Add Publish Results task to the build

• Test result format: JUnit
• Test result files: **/junit.xml

Troubleshooting

• Problems with imports? Try "allowSyntheticDefaultImports": true, in tsconfig.json
• DevDependency grief? Try "no-implicit-dependencies": [true, "dev"], in tslint.json

Regarding using Enzyme with TypeScript, if you have the following error:

enzyme_adapter_react_16_1.default is not a constructor

This ticket provides a solution:

Based on the above answers, what i did to solve this is:

yarn add --dev types/enzyme-adapter-react-16 types/enzyme and changed imports to

import * as Enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

"jest": {
"transform": {
"^.+\.tsx?$": "ts-jest"
},
"testRegex": "(/tests/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},

This is wrong, it needs the to be wrapped around "jest"

"jest": {
"transform": {
"^.+.tsx?$": "ts-jest"
},
"testRegex": "(/tests/.*|(.|/)(test|spec)).(jsx?|tsx?)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},

This is wrong, it needs the to be wrapped around "jest"

OOOOOOOOH never mind it's just not showing in the rendered readme since you placed the jest thing at the same line as the ``` ticks.

I've updated the md so other people reading this moving forward won't make the same mistake

`TypeError: $export is not a function

  1 | /* eslint-env jest */
  2 |
> 3 | import React from "react";`

I am getting a import error. tsconfig below

```

{
"include": ["src", "types", "@types/jest"],
"exclude": ["node_modules"],
"allowSyntheticDefaultImports": true,
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"jsx": "react",
"lib": ["es2015", "dom"],
"baseUrl": "./",
"paths": {
"@src/": ["./src/app/"],
},
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"noImplicitAny": false,
"esModuleInterop": true
}
}

Just stumbled upon these and as I recently moved away from Enzyme and Sinon in favor of just vanilla jest and testing-library. I have to say that I highly recommend to think twice before using Enzyme (or Sinon) nowadays. :)