force regeneration of code in vue 3 when not using single file components

Question

I'm using vue 3 with jest for unit tests. My component is in the .vue file, with js and css in separate files and included in the .vue via src=:

<template>
  <div>my library</div>
</template>

<script src="./library.js"></script>
<style src="./library.css"></style>

This works well for the most part, e.g. npm run serve reloads and refreshes everything as I save changes to those files.

However, when I run npm run test:unit the tests are running against a stale (cached?) version of my library.js. My package.json includes in scripts: "test:unit": "vue-cli-service test:unit",. I suspect it is cached because if I add a comment to the .vue file, it runs against the correct version of the .js, but if I remove the comment (so the file matches the previous version) then it runs against the stale .js again.

Possibly interesting is that running vue-cli-service test:unit --watch does re-run the tests when I change the .js file, but it runs against the stale version and not the new version that triggers the re-run.

The only workaround I seem to have is to append to a dummy comment in the .vue file, which is annoying. Or move to SFC which I find annoying because editor support for the different sections isn't as good as it is with separate files.

How can I get npm / vue-cli-service to bypass this apparent caching? Or is there a way to clear the cache?

The script below will reproduce the issue. Note in the output at the bottom that the tests are run three times:

1. On the first run the output should include "hello created 1".
2. Then the .js file is edited to change that string so that on the second run the output should be "hello created 2". However, when I run this script it provides "hello created 1" on both test runs.
3. Then the .vue file is edited to change a dummy comment. On the third run, the output is "hello created 2" as expected.

#!/bin/bash

if [[ -f package.json ]]
then
    echo "'cd ..' and rerun this script"
    echo "you need to be in the parent directory to the project directory"
    exit 1
fi

if [[ ! -d utfail ]]
then
   vue create -p __default_vue_3__ utfail
   cd utfail

   # specific versions are based on what I was using originally
   npm install vue@3.0.3
   npm install -D @vue/test-utils@2.0.0-beta.11
   npm install -D @vue/compiler-sfc@3.0.3
   npm install -D vue-jest@5.0.0-alpha.7
   npm install -D @vue/cli-plugin-unit-jest@4.5.9
   npm install -D typescript@3.9.7
else
    cd utfail
fi
       

# hack: replace the default lint script with test:unit
sed -i -e 's/^.*"lint":.*$/    "test:unit": "vue-cli-service test:unit"/' package.json

cat <<EOF > jest.config.js
module.exports = {
    moduleFileExtensions: ["js", "json", "vue"],
    preset: '@vue/cli-plugin-unit-jest',
    transform: {
        '^.+\\.js$': "babel-jest",
        '^.+\\.vue$': 'vue-jest'
    },
    "automock": false,
    "setupFiles": [
    "./setupJest.js"
    ]
}
EOF

cat <<EOF > src/components/HelloWorld.vue
<!-- dummy comment 1 -->
<template>
  <div class="hello">blah</div>
</template>

<script src="./helloworld.js"></script>

<style></style>
EOF

cat <<EOF > src/components/helloworld.js
export default {
  name: 'HelloWorld',
  created() {
    console.log("hello created 1")
  }
}
EOF

cat <<EOF > setupJest.js
// require('jest-fetch-mock').enableMocks()
EOF

mkdir -p __tests__
cat <<EOF > __tests__/app.spec.js
import { mount } from '@vue/test-utils'
import App from './../src/App.vue'
import HelloWorld from './../src/components/HelloWorld.vue'

describe('HelloWorld', () => {
    beforeEach(() => {
    })

    it('exists', () => {
        const wrapper = mount(HelloWorld)
    expect(wrapper.exists()).toBe(true)
    })
})
EOF

printf '\n*\n*\n*\n*** about to run tests (round 1)\n*\n*\n*\n'
grep 'hello created' src/components/helloworld.js
npm run test:unit

sed -i -e '/hello created/s/1/2/' src/components/helloworld.js

printf '\n*\n*\n*\n*** about to run tests (round 2)\n*\n*\n*\n'
grep 'hello created' src/components/helloworld.js
npm run test:unit

sed -i -e '/dummy comment/s/1/2/' src/components/HelloWorld.vue

printf '\n*\n*\n*\n*** about to run tests (round 3)\n*\n*\n*\n'
grep 'hello created' src/components/helloworld.js
npm run test:unit

Answer 1

Configure Jest to disable the test cache:

// jest.config.js
module.exports = {
  cache: false,
}

Or add the --no-cache flag to the test:unit npm script:

// package.json
{
  "scripts": {
    "test:unit": "vue-cli-service test:unit --no-cache"
  }
}

Or clear the cache with this command from the project's root directory:

npx jest --clearCache