How to ignore test files in webpack with ts-loader

Question

I have a project that runs the test files named "*.test.ts" with jest and ts-jest. This is fine but when I launch webpack, I get errors for the test files:

ERROR in /some/path/note.test.ts
(27,3): error TS2304: Cannot find name '

How can I fix the webpack config to totally ignore test files ?

Here is the webpack config:

const path = require ( 'path' )

module.exports =
{ entry: './src/boot.tsx'
, node:
  { __dirname: false
  }
, output:
  { path: path.resolve ( __dirname, 'app', 'build' )
  , filename: 'app.js'
  , publicPath: '/live-reload/'
  }
, devtool: 'source-map'
, resolve:
  { extensions: ['', '.js', '.ts', '.tsx']
  }
, module:
  { loaders:
    [ { test: /\.tsx?$/
      , exclude: /node_modules/
      , loader: 'ts-loader'
      }
    ]
  }
}

[EDIT]

I used the test function to log seen files and the test files do not appear in there, so the problem is not on webpack including the wrong files but on typescript misbehaving (because tests work fine with jest).

ts-loader by default compiles all ts files, even files Webpack isn't told to bundle, like test files for instance that will throw errors due to missing globals. ts-loader may be configured to only compile files that Webpack is told to bundle as described by this answer https://stackoverflow.com/questions/41289265/webpack-ts-loader-compiling-all-files-when-i-only-want-it-to-run-in-one-folder-f — Dylan Landry, May 08 '19 at 14:40

Jonathan · Answer 1 · 2018-03-21T15:23:40.320

21

I ended up resolving this too, but in a different way, namely, adding the following settings to my .tsconfig file:

"include": [
    "./lib/**/*"
],
"exclude": [
    "./lib/__tests__"
]

Not sure why this didn't come up for the OP and company. Perhaps they already had those settings in their .tslint file (e.g. because their project had been generated or forked from another project).

But it looks like TypeScript (at least, as of 2.3.2) pays attention to these settings and ignores equivalent settings in webconfig.config.js.

edited Mar 21 '18 at 15:23

answered Jul 02 '17 at 06:39

Jonathan

32,202
38
137
208

You saved me a bunch of time of banging my head against the wall with webpack. Thank you! – Deividas Mar 21 '18 at 10:55
4

I assume you're putting all your test files under `./lib/__tests__` right? If you exclude that folder in tsconfig, you'll lose intellisense from TS. I think a more reasonable solution is [this](https://github.com/TypeStrong/ts-loader/issues/544#issuecomment-316856503). – Bruce Sun Aug 08 '18 at 09:04
5

What if I want typescript to check test files during development, but I don't want to include them in my bundle? – onlyanegg Apr 06 '20 at 17:01

score 7 · Answer 2 · answered Dec 20 '16 at 09:42

7

You can specify a function instead of the regular expression for the loader test property; this can give you a more control.

test: function (modulePath) {
  return modulePath.endsWith('.ts') && !modulePath.endsWith('test.ts');
}

answered Dec 20 '16 at 09:42

Acidic

6,154
12
46
80

2

Thanks for the pointer but it does not fix it (I added a comment). The problem seem to be with typescript not webpack filtering... – Anna B Dec 20 '16 at 15:22

score 2 · Answer 3 · answered Dec 20 '16 at 15:36

2

Found it. My version of 'ts-loader' was behind and somehow did not manage to properly handle installed @types.

Rule of thumb: pack, build, transpile issues: upgrade dev dependencies.

answered Dec 20 '16 at 15:36

Anna B

5,997
5
40
52

I tried upgrading to the latest version, which at this time is 2.1.0, but I'm already at that version (and double-checked in the `node_modules` folder to make sure) and I'm still getting this exact issue! Did you do anything else, or just upgrade the version? – Jonathan Jun 13 '17 at 23:17
1

Make sure typescript is also updated to latest version (2.3.x currently)... – Anna B Jun 27 '17 at 17:56

How to ignore test files in webpack with ts-loader

3 Answers3

Linked