Ignore coverage HTML files from Vite + React HMR

Question

I have a project set up using vite with the @vitejs/plugin-react extension. I'm using the basic config of

export default defineConfig({
  plugins: [react({ include: ['src'] })]
})

In the dev server output I'm seeing page reloads of my coverage HTML files, for example

8:09:45 PM [vite] page reload coverage/lcov-report/App.tsx.html

My coverage files are located in the project root with a directory of coverage. I've tried a number of settings in the Vite config, such as

optimizeDeps: {
  entries: ['index.html'],
  exclude: ['coverage']
}

and

server: {
  watch: {
    exclude: ['coverage']
  }
}

however neither of these seem to have any effect. I also tried the following on the React plugin itself

exclude: /coverage/

but no dice. I would expect that a path like coverage would be excluded by default.

score 4 · Accepted Answer · answered Aug 30 '22 at 13:16

4

This worked for me:

  server: {
    watch: {
      ignored: ['**/coverage/**'],
    },
  }

answered Aug 30 '22 at 13:16

Gerard de Brieder

Either I'm blind, or this wasn't in the [documentation](https://vitejs.dev/config/server-options.html#server-watch) before. Thanks! – knueser Aug 31 '22 at 21:19
Or rather than `'**/coverage/**` you can do `path.resolve(__dirname, './coverage')` to ignore only the top level `coverage` folder – binaryfunt Mar 29 '23 at 16:55

1 Answers1