feat(examples): adds example for running jest with typescript (#2245)

fredrikredflag · web-flow · commit 3c118001b684 · 2020-11-10T10:55:42.000-08:00
diff --git a/.bazelrc b/.bazelrc
@@ -5,8 +5,8 @@ import %workspace%/common.bazelrc
 # This lets us glob() up all the files inside the examples to make them inputs to tests
 # To update these lines, just run `yarn bazel:update-deleted-packages`
 # (Note, we cannot use common --deleted_packages because the bazel version command doesn't support it)
-build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular/tools,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/create-react-app,examples/cypress,examples/from_source,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/vue,examples/vue/src,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/coverage,e2e/coverage/node_modules/@bazel/typescript/internal/devserver,e2e/coverage/node_modules/@bazel/typescript/internal,e2e/coverage/node_modules/@bazel/typescript/devserver,e2e/coverage/node_modules/@bazel/typescript/third_party/github.com/bazelbuild/bazel/src/main/protobuf,e2e/coverage/node_modules/@bazel/typescript/third_party/npm/requirejs,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/nodejs_image,e2e/nodejs_image/foolib,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
-query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular/tools,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/create-react-app,examples/cypress,examples/from_source,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/vue,examples/vue/src,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/coverage,e2e/coverage/node_modules/@bazel/typescript/internal/devserver,e2e/coverage/node_modules/@bazel/typescript/internal,e2e/coverage/node_modules/@bazel/typescript/devserver,e2e/coverage/node_modules/@bazel/typescript/third_party/github.com/bazelbuild/bazel/src/main/protobuf,e2e/coverage/node_modules/@bazel/typescript/third_party/npm/requirejs,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/nodejs_image,e2e/nodejs_image/foolib,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
+build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular/tools,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/create-react-app,examples/cypress,examples/from_source,examples/jest,examples/jest/ts,examples/jest/ts/src,examples/jest/ts/test,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/vue,examples/vue/src,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/coverage,e2e/coverage/node_modules/@bazel/typescript/internal/devserver,e2e/coverage/node_modules/@bazel/typescript/internal,e2e/coverage/node_modules/@bazel/typescript/devserver,e2e/coverage/node_modules/@bazel/typescript/third_party/github.com/bazelbuild/bazel/src/main/protobuf,e2e/coverage/node_modules/@bazel/typescript/third_party/npm/requirejs,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/nodejs_image,e2e/nodejs_image/foolib,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
+query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular/tools,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/create-react-app,examples/cypress,examples/from_source,examples/jest,examples/jest/ts,examples/jest/ts/src,examples/jest/ts/test,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/vue,examples/vue/src,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/coverage,e2e/coverage/node_modules/@bazel/typescript/internal/devserver,e2e/coverage/node_modules/@bazel/typescript/internal,e2e/coverage/node_modules/@bazel/typescript/devserver,e2e/coverage/node_modules/@bazel/typescript/third_party/github.com/bazelbuild/bazel/src/main/protobuf,e2e/coverage/node_modules/@bazel/typescript/third_party/npm/requirejs,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/nodejs_image,e2e/nodejs_image/foolib,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
 
 # Mock versioning command to test the --stamp behavior
 build --workspace_status_command="echo BUILD_SCM_VERSION 1.2.3"
diff --git a/examples/BUILD.bazel b/examples/BUILD.bazel
@@ -113,6 +113,9 @@ example_integration_test(
 
 example_integration_test(
     name = "examples_jest",
+    npm_packages = {
+        "//packages/typescript:npm_package": "@bazel/typescript",
+    },
     owners = ["@mrmeku"],
 )
 
diff --git a/examples/jest/BUILD.bazel b/examples/jest/BUILD.bazel
@@ -1,5 +1,13 @@
 load(":jest.bzl", "jest_test")
 
+exports_files(
+    [
+        "jest.ts.config.js",
+        "tsconfig.json",
+    ],
+    visibility = ["//visibility:public"],
+)
+
 jest_test(
     name = "test",
     srcs = [
diff --git a/examples/jest/README.md b/examples/jest/README.md
@@ -3,3 +3,7 @@
 This example shows how you might use the Jest testing framework
 
 It has a utility macro in `jest.bzl` which makes a more ergonomic API for calling the `jest_test` rule in `@npm//jest-cli:index.bzl`. We suggest copying that to your repo.
+
+# Jest typescript example
+
+Under `ts/` there's an example of using jest with typescript directly with generated rule from `@npm//jest-cli:index.bzl`
diff --git a/examples/jest/jest.ts.config.js b/examples/jest/jest.ts.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  testEnvironment: 'node',
+  reporters: ['default'],
+  testMatch: ['**/*.test.js'],
+  moduleNameMapper: {
+    'examples_jest/(.*)': '<rootDir>/$1',
+  },
+};
diff --git a/examples/jest/package.json b/examples/jest/package.json
@@ -5,12 +5,15 @@
         "@babel/cli": "^7.6.0",
         "@babel/core": "^7.6.0",
         "@babel/preset-env": "^7.6.0",
+        "@bazel/typescript": "^2.2.2",
         "@jest/core": "24.7.1",
         "@jest/transform": "24.7.1",
+        "@types/jest": "^26.0.15",
         "babel-jest": "24.7.1",
         "babel-plugin-istanbul": "5.1.2",
         "jest-cli": "24.9.0",
-        "patch-package": "^6.2.0"
+        "patch-package": "^6.2.0",
+        "typescript": "^3.8.3"
     },
     "scripts": {
         "postinstall": "patch-package",
diff --git a/examples/jest/ts/BUILD.bazel b/examples/jest/ts/BUILD.bazel
diff --git a/examples/jest/ts/src/BUILD.bazel b/examples/jest/ts/src/BUILD.bazel
@@ -0,0 +1,9 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "src",
+    srcs = glob(["*.ts"]),
+    deps = [],
+)
diff --git a/examples/jest/ts/src/extra.ts b/examples/jest/ts/src/extra.ts
@@ -0,0 +1 @@
+export default 'test';
diff --git a/examples/jest/ts/src/index.ts b/examples/jest/ts/src/index.ts
@@ -0,0 +1,3 @@
+import extra from './extra';
+
+export default extra;
diff --git a/examples/jest/ts/test/BUILD.bazel b/examples/jest/ts/test/BUILD.bazel
@@ -0,0 +1,37 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+load("@npm//jest-cli:index.bzl", "jest_test")
+
+ts_library(
+    name = "test_lib",
+    srcs = glob([
+        "**/*.ts",
+    ]),
+    deps = [
+        "//ts/src",
+        "@npm//@types",
+    ],
+)
+
+jest_test(
+    name = "test",
+    args = [
+        "--no-cache",
+        "--no-watchman",
+        "--ci",
+        "--colors",
+        "--config",
+        "jest.ts.config.js",
+    ],
+    data = [
+        ":test_lib",
+        "//:jest.ts.config.js",
+    ],
+    tags = [
+        # Need to set the pwd to avoid jest needing a runfiles helper
+        # Windows users with permissions can use --enable_runfiles
+        # to make this test work
+        "no-bazelci-windows",
+        # TODO: why does this fail almost all the time, but pass on local Mac?
+        "no-bazelci-mac",
+    ],
+)
diff --git a/examples/jest/ts/test/index.test.ts b/examples/jest/ts/test/index.test.ts
@@ -0,0 +1,5 @@
+import indexfile from '../src/index';
+
+test('it should work', () => {
+  expect(indexfile).toBe('test');
+});
diff --git a/examples/jest/tsconfig.json b/examples/jest/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "target": "es5",
+      "module": "commonjs",
+      "strict": true,
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true
+    }
+  }
+  
diff --git a/examples/jest/yarn.lock b/examples/jest/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -113,6 +113,9 @@ example_integration_test(`
`113`	`113`
`114`	`114`	`example_integration_test(`
`115`	`115`	`name = "examples_jest",`
	`116`	`+ npm_packages = {`
	`117`	`+ "//packages/typescript:npm_package": "@bazel/typescript",`
	`118`	`+ },`
`116`	`119`	`owners = ["@mrmeku"],`
`117`	`120`	`)`
`118`	`121`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import extra from './extra';`
	`2`	`+`
	`3`	`+export default extra;`