fix(webpack-transpiler): add support for cache-loader (#2196)

Add support for the `cache-loader` plugin by migrating the memfs dependency.

packages/webpack-transpiler/package.json

@@ -36,7 +36,6 @@
   "homepage": "https://github.com/stryker-mutator/stryker/tree/master/packages/webpack-transpiler#readme",
   "devDependencies": {
     "@stryker-mutator/test-helpers": "^3.1.0",
-    "@types/memory-fs": "~0.3.0",
     "@types/node": "^13.7.1",
     "@types/webpack": "~4.41.0",
     "raw-loader": "~4.0.0",
@@ -49,7 +48,7 @@
   "dependencies": {
     "@stryker-mutator/api": "^3.1.0",
     "enhanced-resolve": "~4.1.0",
-    "memory-fs": "~0.5.0"
+    "memfs": "^3.1.2"
   },
   "initStrykerConfig": {
     "webpack": {

packages/webpack-transpiler/src/fs/InputFileSystem.ts

@@ -2,19 +2,18 @@ import * as fs from 'fs';
 import { dirname } from 'path';
 
 import { CachedInputFileSystem, NodeJsInputFileSystem, Stats } from 'enhanced-resolve';
+import { IFs } from 'memfs';
 
 import { Callback, webpack } from '../types';
 
-import MemoryFS from './MemoryFS';
+import memFS from './memory-fs';
 
 // Cache duration is same as webpack has
 // => https://github.com/webpack/webpack/blob/efc576c8b744e7a015ab26f1f46932ba3ca7d4f1/lib/node/NodeEnvironmentPlugin.js#L14
 const CACHE_DURATION = 60000;
 
 export default class InputFileSystem extends CachedInputFileSystem implements webpack.InputFileSystem {
-  private readonly memoryFS = new MemoryFS();
-
-  constructor(innerFS = new NodeJsInputFileSystem()) {
+  constructor(innerFS = new NodeJsInputFileSystem(), private readonly memoryFS: IFs = memFS) {
     super(innerFS, CACHE_DURATION);
   }
 

packages/webpack-transpiler/src/fs/memory-fs.ts

@@ -0,0 +1,6 @@
+import { fs } from 'memfs';
+
+/**
+ * Wrapper file for testability
+ */
+export default fs;

packages/webpack-transpiler/src/types.ts

@@ -26,8 +26,8 @@ export declare namespace webpack {
     statSync(path: string): Stats;
     readdirSync(path: string): string[];
 
-    readFileSync(path: string, encoding?: string): string;
-    readlinkSync(path: string): string | Buffer;
+    readFileSync(path: string, encoding?: string): string | Buffer;
+    readlinkSync(path: string): string;
   }
 
   /**

packages/webpack-transpiler/test/unit/fs/InputFileSystem.spec.ts

@@ -1,21 +1,21 @@
 import { expect } from 'chai';
 import { CachedInputFileSystem } from 'enhanced-resolve';
 import * as sinon from 'sinon';
+import { IFs } from 'memfs';
 
 import InputFileSystem from '../../../src/fs/InputFileSystem';
-import MemoryFS, * as memoryFSModule from '../../../src/fs/MemoryFS';
+import memoryFS from '../../../src/fs/memory-fs';
 import { createMockInstance, Mock } from '../../helpers/producers';
 
 describe('InputFileSystem', () => {
   let sut: InputFileSystem;
-  let memoryFSMock: Mock<MemoryFS>;
+  let memoryFSMock: sinon.SinonStubbedInstance<IFs>;
   let innerFSMock: Mock<CachedInputFileSystem>;
 
   beforeEach(() => {
-    memoryFSMock = createMockInstance(MemoryFS);
+    memoryFSMock = sinon.stub(memoryFS);
     innerFSMock = createMockInstance(CachedInputFileSystem);
-    sinon.stub(memoryFSModule, 'default').returns(memoryFSMock);
-    sut = new InputFileSystem(innerFSMock);
+    sut = new InputFileSystem(innerFSMock, (memoryFSMock as unknown) as IFs);
   });
 
   describe('writeFileSync', () => {

packages/webpack-transpiler/typings/enhanced-resolve.d.ts

@@ -1,4 +1,3 @@
-
 declare module 'enhanced-resolve' {
   export interface Stats {
     isFile(): boolean;
@@ -18,8 +17,9 @@ declare module 'enhanced-resolve' {
     readdirSync(path: string): string[];
     readFile(
       filename: string,
-      encoding: string | { encoding: string; flag?: string; },
-      callback: (err: NodeJS.ErrnoException, data: string) => void): void;
+      encoding: string | { encoding: string; flag?: string },
+      callback: (err: NodeJS.ErrnoException, data: string) => void
+    ): void;
     readFile(
       filename: string,
       options: {
@@ -39,8 +39,12 @@ declare module 'enhanced-resolve' {
 
   export class NodeJsInputFileSystem implements AbstractInputFileSystem {
     public readdir(path: string, callback: (err: NodeJS.ErrnoException, files: string[]) => void): void;
-    public readFile(filename: string, encoding: string | { encoding: string; flag?: string | undefined; }, callback: (err: NodeJS.ErrnoException, data: string) => void): void;
-    public readFile(filename: string, options: { flag?: string | undefined; }, callback: (err: NodeJS.ErrnoException, data: Buffer) => void): void;
+    public readFile(
+      filename: string,
+      encoding: string | { encoding: string; flag?: string | undefined },
+      callback: (err: NodeJS.ErrnoException, data: string) => void
+    ): void;
+    public readFile(filename: string, options: { flag?: string | undefined }, callback: (err: NodeJS.ErrnoException, data: Buffer) => void): void;
     public readFile(filename: string, callback: (err: NodeJS.ErrnoException, data: Buffer) => void): void;
     public readFile(filename: any, options: any, callback?: any): void;
     public readlink(path: string, callback: (err: NodeJS.ErrnoException, linkString: string) => void): void;
@@ -70,7 +74,7 @@ declare module 'enhanced-resolve' {
 
     public readdirSync(path: string): string[];
 
-    public readFileSync(filename: string, options?: string): Buffer;
+    public readFileSync(filename: string, options?: string): string | Buffer;
 
     public readlinkSync(path: string | Buffer): string;
 

workspace.code-workspace

@@ -120,6 +120,7 @@
     },
     "cSpell.words": [
       "Surrializable",
+      "memfs",
       "serializable",
       "surrialize"
     ]