Auto-mock Static Resources

[aheber]

Just starting to try this out. I have a component that I'm trying get working and seeing success.

In one of my LWCs I import a static resource through something like...

import SR_URL from "@salesforce/resourceUrl/static_resource_name";

To make this work I had to add __mocks__/@salesforce/resourceUrl/static_resource_name.js that returned a string value.

export default "/resource/99999999999/static_resource_name";

I then had to go into lwr.config.json and map the static resource URL as an asset.

{
  ...
  "assets": [
    ...
    {
      "dir": "./force-app/main/default/staticresources/static_resource_name",
      "urlPath": "/resource/99999999999/static_resource_name"
    }
  ]
}

This seems like something that this project could have handled automatically. Happy to talk through this and find out if I missed the correct way to handle this. If this can be something that can be handled for me so I don't have to manually set it up for each static resource that would be awesome!

Thanks for working on this, I found out about this project where you posted in relation to the local-dev-server's unfortunate news that we won't see any improvement until 2025 at the soonest. Appreciate you working on an alternative.

[lukethacoder]

Hey @aheber,

Was on a project recently where I really did not want to be mocking every single staticresource import like you've outlined above. This was the push I needed to build something easier.

You can now use a combination of a custom hook and a module provider to solve this issue. Simple configuration is as follows. More information can be found at lwc.garden/packages/staticresources

pnpm add -D @lwc-garden/utils

Note

This is a separate package as this can be used outside of the main @lwc-garden/core without any issues (e.g. npx lwr dev)

lwr.config.json || lwc.config.json

"moduleProviders": [
 [
   "@lwc-garden/utils/resolvers/staticresources.ts",
   {
     "paths": ["force-app/main/default/staticresources"]
   }
 ]
]
"hooks": [
 "@lwc-garden/utils/hooks/staticresources.ts"
],
"globalData": {
 "garden": {
   "staticresources": {
     "paths": ["force-app/main/default/staticresources"]
   }
 }
}

[aheber]

Thanks, @lukethacoder! I'll give this a try next time I have the opportunity.