Setup unit test with jest, ts-jest and enzyme #17

chenesan · 2019-03-07T09:48:28Z

Purpose

Add unit tests script with jest and typescript.

Change

Add test and test:watch scripts in root directory and every single package.
Add jest, ts-jest, enzyme, enzyme-adapter-react-16 dependency.
Replace lodash-es with lodash.

It's possible to transpile single es module with { transformIgnorePatterns: ["node_modules/(?!(lodash-es)/)"] } in jest config (See the option doc and the trick), but it's deadly slow (~300s) even there's only one test. I'm sure with the option it only transpile lodash-es and not really sure what makes it so slow, but I decide to directly use lodash by import xxx from 'lodash/xxx' so we don't worry about bundle size.
Add a sample test of ResponsiveLayer

Risk

May not work in others' machine (should work I think). I hope everyone try to run it in their own machine and try if (1) yarn test passed (2) yarn prepublish successfully build with no error (except the HoverLayer one which should be fixed in #14.

Todos

None.

chenesan · 2019-03-07T09:49:27Z

config/jest.config.base.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: 'ts-jest',


See usage in the ts-jest document

chenesan · 2019-03-07T10:11:37Z

config/tsconfig.base.json

@@ -3,6 +3,7 @@
    "baseUrl": "./packages",
    "outDir": "lib",
    "module": "es6",
+    "esModuleInterop": true,


It's a must-added option or the jest will treat default import as undefined :-( See this issue

chenesan · 2019-03-07T10:12:16Z

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  projects: ['<rootDir>/packages/*'],


This leverage jest project config to run tests in different projects

Nice settings. I think this could be combined into the /config folder, and keep just one /config/jest.config.js file.

chenesan · 2019-03-07T10:12:57Z

packages/animation/src/tsconfig.cjs.json

@@ -3,5 +3,9 @@
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "../lib/cjs"
-  }
+  },
+  "exclude": [


exclude test files when run yarn build.

hsunpei

The test works like a charm on my Mac 👍

The settings for tests are configured for each package. However, I think we could just run them from the root level, since there might be rare chances that we want to run tests of a single package, and each package folder will be calculated as Jest runs the coverage.

You may refer to the settings of gypcrete, and I think we might apply similar settings to the charting library:

"test": "jest ./packages --config=configs/jest.config.json --coverage"

hsunpei · 2019-03-11T03:39:36Z

package.json

@@ -9,16 +9,25 @@
    "build": "docz build",
    "prepublish": "lerna run prepublish",
    "lint": "lerna run lint --parallel --stream",
-    "clean": "lerna run --parallel clean"
+    "clean": "lerna run --parallel clean",
+    "test": "jest",


We might not need separate Jest config for each package, for Jest supports monorepo libraries and the stats of each package folder will be calculated as it runs the coverage.

You may refer to the settings of gypcrete:

"test": "jest ./packages --config=configs/jest.config.json --coverage"

hsunpei · 2019-03-11T03:42:00Z

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  projects: ['<rootDir>/packages/*'],


Nice settings. I think this could be combined into the /config folder, and keep just one /config/jest.config.js file.

hsunpei · 2019-03-11T03:45:21Z

packages/animation/package.json

    "build:cjs": "tsc -p ./src/tsconfig.cjs.json",
    "clean": "rimraf ./dist ./lib ./es5 ./deploy",
-    "lint": "tslint --project ./src"
+    "lint": "tslint --project ./src",
+    "test": "jest",


There might be rare chances that we want to run tests of a single package, so I think that removing it and keeping it in the root package folder might be nicer.

chenesan · 2019-03-11T06:33:12Z

Sounds reasonable. I wasn't sure if the tsconfig.json would be the same in every package in the future. But that makes sense to have only one jest config.

chenesan · 2019-03-11T08:01:21Z

@garfieldduck I just remove test config in each package and make yarn test run from project root directly. This could be reviewed now :)

zhusee2 · 2019-03-12T10:24:50Z

packages/graph/src/layers/__tests__/ResponsiveLayer.test.tsx

+        </div>
+      );
+    };
+    act(() => {


Not sure if you need act() when using enzyme though.

Currently, it does if we set state in the wrapped function of useEffect; However just few days ago I made enzymejs/enzyme#2034 to wrap enzyme's render with act so after enzyme release this I guess it should be fine without act() wrapper explicitly.

But yes, in this test case we don't need act wrap since we just mock the useContainerDimension out. I'll remove this.

zhusee2

Nice and clean setup 👍
Looks like ts-jest works like a charm.

zhusee2 · 2019-03-12T10:30:39Z

Encountering this on build, but it looks like expected:

src/line/LineChart.tsx(206,12): error TS2739: Type '{ setHoveredPosAndIndex: (hoveredIndex: number, xPos: number, yPos: number) => void; clearHovering: () => void; collisionComponents: Element[]; }' is missing the following properties from type 'HoverLayerProps': handleHover, throttleTime

src/line/LineChart.tsx(206,12): error TS2739: Type '{ setHoveredPosAndIndex: (hoveredIndex: number, xPos: number, yPos: number) => void; clearHovering: () => void; collisionComponents: Element[]; }' is missing the following properties from type 'HoverLayerProps': handleHover, throttleTime

Tests are working fine.

hsunpei

Looks great to me 👍 💯

chenesan self-assigned this Mar 7, 2019

chenesan commented Mar 7, 2019

View reviewed changes

chenesan requested review from hsunpei, tz5514 and zhusee2 March 7, 2019 10:16

hsunpei reviewed Mar 11, 2019

View reviewed changes

zhusee2 reviewed Mar 12, 2019

View reviewed changes

zhusee2 approved these changes Mar 12, 2019

View reviewed changes

chenesan force-pushed the chore/jest-setup branch from 0752084 to d33ccd1 Compare March 13, 2019 03:02

hsunpei approved these changes Mar 13, 2019

View reviewed changes

chenesan added 11 commits March 13, 2019 17:51

Add jest and ts-jest

b43a15f

Remove unused __tests__ folder

4a7be4c

Add jest.config.js

24faf23

Setup enzyme

64ab791

Add esModuleInterop in base tsconfig to allow default import in test

0c97de4

Use cjs version of lodash to make jest happy

b4d25c5

Ignore test files in build scripts

13467b1

Add test script in package.json

211f6c5

Add ResponsiveLayer test case

1fca222

Update CHANGELOG.md

b49366e

Only run test from root directory

7eeff31

chenesan force-pushed the chore/jest-setup branch from d33ccd1 to 7eeff31 Compare March 13, 2019 09:59

chenesan merged commit 64e2832 into develop Mar 13, 2019

chenesan mentioned this pull request Mar 18, 2019

Release/0.0.2 #26

Merged

zhusee2 deleted the chore/jest-setup branch September 9, 2019 10:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setup unit test with jest, ts-jest and enzyme #17

Setup unit test with jest, ts-jest and enzyme #17

chenesan commented Mar 7, 2019 •

edited

Loading

chenesan Mar 7, 2019

chenesan Mar 7, 2019

chenesan Mar 7, 2019

hsunpei Mar 11, 2019

chenesan Mar 7, 2019

hsunpei left a comment

hsunpei Mar 11, 2019

hsunpei Mar 11, 2019

hsunpei Mar 11, 2019

chenesan commented Mar 11, 2019

chenesan commented Mar 11, 2019

zhusee2 Mar 12, 2019

chenesan Mar 13, 2019 •

edited

Loading

chenesan Mar 13, 2019 •

edited

Loading

zhusee2 left a comment

zhusee2 commented Mar 12, 2019

hsunpei left a comment

		@@ -0,0 +1,3 @@
		module.exports = {
		projects: ['<rootDir>/packages/*'],

Setup unit test with jest, ts-jest and enzyme #17

Setup unit test with jest, ts-jest and enzyme #17

Conversation

chenesan commented Mar 7, 2019 • edited Loading

Purpose

Change

Risk

Todos

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hsunpei left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chenesan commented Mar 11, 2019

chenesan commented Mar 11, 2019

Choose a reason for hiding this comment

chenesan Mar 13, 2019 • edited Loading

Choose a reason for hiding this comment

chenesan Mar 13, 2019 • edited Loading

Choose a reason for hiding this comment

zhusee2 left a comment

Choose a reason for hiding this comment

zhusee2 commented Mar 12, 2019

hsunpei left a comment

Choose a reason for hiding this comment

chenesan commented Mar 7, 2019 •

edited

Loading

chenesan Mar 13, 2019 •

edited

Loading

chenesan Mar 13, 2019 •

edited

Loading