feat(jest-runner): drop projectType "create-react-app-ts" (#2788)

Drop support for "react-scripts-ts" by removing "create-react-app-ts" project type from the jest-runner. Note: react with typescript is still supported, either by projectType custom or `create-react-app` dependent on the use case. See #2787

Closes #2787

BREAKING CHANGE: Support for project type `create-react-app-ts` is dropped from the jest-runner.

packages/jest-runner/package.json

@@ -42,15 +42,16 @@
   "devDependencies": {
     "@jest/types": "~26.6.1",
     "@stryker-mutator/test-helpers": "4.5.1",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
     "@types/node": "^14.0.1",
     "@types/semver": "~7.3.1",
     "jest": "~26.6.1",
     "jest-circus": "^26.6.3",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "react": "~17.0.1",
     "react-dom": "~17.0.1",
-    "react-scripts": "~4.0.0",
-    "react-scripts-ts": "~3.1.0"
+    "react-scripts": "~4.0.3"
   },
   "peerDependencies": {
     "@stryker-mutator/core": "~4.5.0",

packages/jest-runner/schema/jest-runner-options.json

@@ -38,10 +38,9 @@
   },
   "definitions": {
     "jestProjectType": {
-      "description": "The type of project you are working on. \n* `custom` uses the `config` option. \n*`create-react-app` when you are using [create-react-app](https://github.com/facebook/create-react-app)\n* `create-react-app-ts` when you are using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript)\n* `react`: DEPRECATED, please use `create-react-app`.",
+      "description": "The type of project you are working on. \n* `custom` uses the `config` option. \n*`create-react-app` when you are using [create-react-app](https://github.com/facebook/create-react-app)\n* `react`: DEPRECATED, please use `create-react-app`.",
       "enum": [
         "create-react-app",
-        "create-react-app-ts",
         "custom"
       ]
     }

packages/jest-runner/src/config-loaders/index.ts

@@ -9,14 +9,13 @@ import * as pluginTokens from '../plugin-tokens';
 
 import { CustomJestConfigLoader } from './custom-jest-config-loader';
 import { ReactScriptsJestConfigLoader } from './react-scripts-jest-config-loader';
-import { ReactScriptsTSJestConfigLoader } from './react-scripts-ts-jest-config-loader';
 
 configLoaderFactory.inject = tokens(commonTokens.options, commonTokens.injector, commonTokens.logger);
 export function configLoaderFactory(
   options: StrykerOptions,
   injector: Injector<PluginContext>,
   log: Logger
-): CustomJestConfigLoader | ReactScriptsJestConfigLoader | ReactScriptsTSJestConfigLoader {
+): CustomJestConfigLoader | ReactScriptsJestConfigLoader {
   const warnAboutConfigFile = (projectType: string, configFile: string | undefined) => {
     if (configFile) {
       log.warn(`Config setting "configFile" is not supported for projectType "${projectType}"`);
@@ -35,9 +34,6 @@ export function configLoaderFactory(
     case 'create-react-app':
       warnAboutConfigFile(optionsWithJest.jest.projectType, optionsWithJest.jest.configFile);
       return configLoaderInjector.injectClass(ReactScriptsJestConfigLoader);
-    case 'create-react-app-ts':
-      warnAboutConfigFile(optionsWithJest.jest.projectType, optionsWithJest.jest.configFile);
-      return configLoaderInjector.injectClass(ReactScriptsTSJestConfigLoader);
     default:
       throw new Error(`No configLoader available for ${optionsWithJest.jest.projectType}`);
   }

packages/jest-runner/test/integration/create-react-app.it.spec.ts

@@ -0,0 +1,37 @@
+import { commonTokens } from '@stryker-mutator/api/plugin';
+import { SuccessTestResult } from '@stryker-mutator/api/test-runner';
+import { assertions, factory, testInjector } from '@stryker-mutator/test-helpers';
+import { expect } from 'chai';
+
+import { JestRunnerOptionsWithStrykerOptions } from '../../src/jest-runner-options-with-stryker-options';
+import { JestTestRunner, jestTestRunnerFactory } from '../../src/jest-test-runner';
+import { createJestOptions } from '../helpers/producers';
+import { resolveTestResource } from '../helpers/resolve-test-resource';
+
+describe('JestTestRunner with "create-react-app" project type', () => {
+  let sut: JestTestRunner;
+
+  beforeEach(() => {
+    process.chdir(resolveTestResource('my-react-app'));
+    const options: JestRunnerOptionsWithStrykerOptions = factory.strykerWithPluginOptions({
+      jest: createJestOptions({
+        projectType: 'create-react-app',
+      }),
+    });
+    sut = testInjector.injector.provideValue(commonTokens.options, options).injectFunction(jestTestRunnerFactory);
+  });
+
+  it('should be able to run the tests', async () => {
+    const result = await sut.dryRun({ coverageAnalysis: 'off' });
+
+    const expectedTest: Omit<SuccessTestResult, 'timeSpentMs'> = {
+      id: 'renders learn react link',
+      name: 'renders learn react link',
+      status: 0,
+    };
+
+    assertions.expectCompleted(result);
+    expect(result.tests).lengthOf(1);
+    expect(result.tests[0]).deep.contains(expectedTest);
+  });
+});

packages/jest-runner/test/integration/jest-test-runner.it.spec.ts

@@ -1,5 +1,4 @@
 import path from 'path';
-import { platform } from 'os';
 
 import { expect } from 'chai';
 import { commonTokens } from '@stryker-mutator/api/plugin';
@@ -12,11 +11,6 @@ import { JestOptions } from '../../src-generated/jest-runner-options';
 import { createJestOptions } from '../helpers/producers';
 import { resolveTestResource } from '../helpers/resolve-test-resource';
 
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const paths = require('react-scripts-ts/config/paths');
-// It's a bit hacky, but we need to tell create-react-app-ts to pick a different tsconfig.test.json
-paths.appTsTestConfig = resolveTestResource('reactTsProject/tsconfig.test.json');
-
 // Needed for Jest in order to run tests
 process.env.BABEL_ENV = 'test';
 
@@ -42,33 +36,14 @@ describe(`${JestTestRunner.name} integration test`, () => {
   };
 
   describe('dryRun', () => {
-    it('should run tests on the example React + TypeScript project', async function () {
-      if (platform() === 'win32') {
-        console.log("[SKIP] Skipping this test on windows, react ts doesn't work there.");
-        this.skip();
-      }
-      // TODO: Get a proper React TS project that works on Windows
-      process.chdir(resolveTestResource('reactTsProject'));
-      const jestTestRunner = createSut({ projectType: 'create-react-app-ts' });
-
-      const runResult = await jestTestRunner.dryRun({ coverageAnalysis: 'off' });
-
-      assertions.expectCompleted(runResult);
-      expectToHaveSuccessfulTests(runResult, 1);
-    });
-
     it('should set the test name and timeSpentMs', async function () {
-      if (platform() === 'win32') {
-        console.log("[SKIP] Skipping this test on windows, react ts doesn't work there.");
-        this.skip();
-      }
-      process.chdir(resolveTestResource('reactTsProject'));
-      const jestTestRunner = createSut({ projectType: 'create-react-app-ts' });
+      process.chdir(resolveTestResource('jasmine2-node'));
+      const jestTestRunner = createSut();
 
       const runResult = await jestTestRunner.dryRun({ coverageAnalysis: 'off' });
 
       assertions.expectCompleted(runResult);
-      expect(runResult.tests[0].name).to.equal('renders without crashing');
+      expect(runResult.tests[0].name).to.equal('Add should be able to add two numbers');
       expect(runResult.tests[0].timeSpentMs).to.be.above(-1);
     });
 

packages/jest-runner/test/unit/config-loaders/config-loader-factory.spec.ts

@@ -6,24 +6,20 @@ import { Config } from '@jest/types';
 
 import * as customJestConfigLoader from '../../../src/config-loaders/custom-jest-config-loader';
 import * as reactScriptsJestConfigLoader from '../../../src/config-loaders/react-scripts-jest-config-loader';
-import * as reactScriptsTSJestConfigLoader from '../../../src/config-loaders/react-scripts-ts-jest-config-loader';
 import { JestRunnerOptionsWithStrykerOptions } from '../../../src/jest-runner-options-with-stryker-options';
 import { configLoaderFactory } from '../../../src/config-loaders';
 
 describe(configLoaderFactory.name, () => {
   let customConfigLoaderStub: sinon.SinonStubbedInstance<customJestConfigLoader.CustomJestConfigLoader>;
   let reactScriptsJestConfigLoaderStub: sinon.SinonStubbedInstance<reactScriptsJestConfigLoader.ReactScriptsJestConfigLoader>;
-  let reactScriptsTSJestConfigLoaderStub: sinon.SinonStubbedInstance<reactScriptsTSJestConfigLoader.ReactScriptsTSJestConfigLoader>;
   let options: JestRunnerOptionsWithStrykerOptions;
 
   beforeEach(() => {
     customConfigLoaderStub = sinon.createStubInstance(customJestConfigLoader.CustomJestConfigLoader);
     reactScriptsJestConfigLoaderStub = sinon.createStubInstance(reactScriptsJestConfigLoader.ReactScriptsJestConfigLoader);
-    reactScriptsTSJestConfigLoaderStub = sinon.createStubInstance(reactScriptsTSJestConfigLoader.ReactScriptsTSJestConfigLoader);
 
     sinon.stub(customJestConfigLoader, 'CustomJestConfigLoader').returns(customConfigLoaderStub);
     sinon.stub(reactScriptsJestConfigLoader, 'ReactScriptsJestConfigLoader').returns(reactScriptsJestConfigLoaderStub);
-    sinon.stub(reactScriptsTSJestConfigLoader, 'ReactScriptsTSJestConfigLoader').returns(reactScriptsTSJestConfigLoaderStub);
 
     const defaultOptions: Partial<Config.InitialOptions> = {
       collectCoverage: true,
@@ -33,7 +29,6 @@ describe(configLoaderFactory.name, () => {
     };
     customConfigLoaderStub.loadConfig.returns(defaultOptions);
     reactScriptsJestConfigLoaderStub.loadConfig.returns(defaultOptions);
-    reactScriptsTSJestConfigLoaderStub.loadConfig.returns(defaultOptions);
 
     options = factory.strykerWithPluginOptions({
       jest: {
@@ -65,22 +60,6 @@ describe(configLoaderFactory.name, () => {
       testConfigFileWarning(options);
     });
   });
-
-  describe('with "projectType": "create-react-app-ts"', () => {
-    beforeEach(() => {
-      options.jest.projectType = 'create-react-app-ts';
-    });
-
-    it('should create a ReactScriptsTSJestConfigLoader', () => {
-      const sut = testInjector.injector.provideValue(commonTokens.options, options).injectFunction(configLoaderFactory);
-
-      expect(sut).eq(reactScriptsTSJestConfigLoaderStub);
-    });
-
-    it('should warn when a configFile is set', () => {
-      testConfigFileWarning(options);
-    });
-  });
 });
 
 function testConfigFileWarning(options: JestRunnerOptionsWithStrykerOptions) {

packages/jest-runner/testResources/my-react-app/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "my-react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}