.json files are not shown in IntelliJ

[Loeng Chen]

When testing LWC components we can use Jest Framework to mock wire adapters. In order to do that we add .json files under the ‘__test__’ folder. When I open one of the .json files then the content is not shown.

The .json file should also not be deployed to Salesforce

According to the documentation
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.unit_testing_using_wire_utility

In the __tests__ folder, create a data folder, and a JSON file called wireAdapter.json. It’s a best practice to name the file after the wire adapter. Mock the data the component expects from Salesforce.

Steps to repoduce

1. create a web component e.g. helloWorld
2. add the ‘__test__’ folder
3. add a new json file e.g. ‘helloAdapter.json’
4. open file ‘helloAdapter.json’

Issue

Content of Json file is not shown

‌

[Scott Wells]

Thanks for letting me know. I'll work this into one of the near-term builds.

[Loeng Chen]

Hi Scott, just a friendly reminder that the __tests__ folder can contain subfolders like ‘data’ for containing mock data.

[Scott Wells]

Thanks again, Loeng. Yes, I'm thinking I may just decouple the test files from the bundle given that they really are effectively distinct. That way the bundle's tabbed editor won't try to "own" those and they'll open fine, and IC doesn't have to try to determine for which test files it should create a sub-tab.

[Loeng Chen]

Hi Scott, well here are my 2 cents.

I think ideally the test script files should remain in the bundle if they are found in the __test__ folder. Because the testscript should be testing the functionality of the web component itself. There can be multiple test files, but fundamentally they should be only testing the related web components.

The only thing I am struggling with is the placement of the .json files. As per the documentation from Salesforce. the mocking .json files should be placed under ‘__tests__/data/' subfolder. I think that doesn’t make much sense and could create data redundancy and data inconsistency. So assume I have 2 seperate web components. Both components import the same wire adapter (e.g. getRecords from the ContactController Apex class). Per Salesforce documentation I should be creating ‘__tests__/data’ subfolder in both web components folder.

Fore storing the mocking data I would preferably store the mocking Json data directly under the ‘lwc’ folder. E.g. ‘/lwc/__tests__/mocks' folder. Those mocking .json files can be decoupled from the bundle. Mocking json files should be self explanatory, because the filename should be the same as the wireAdapter e.g. contactController_getRecords.json. But…. I haven’t tried this idea yet…

[Scott Wells]

That's fair. Let me tinker with it a bit and see where the right balance might be. Minimally I need to make these files properly accessible in the IDE. If there's still usability tuning to do from there, so be it. I'm always open to feedback on how things work with the goal is making it as seamless as I can. Thanks for the feedback!

[Scott Wells]

This was addressed a bit back. These files are opened in their own standalone editors and not in the bundle's tabbed editor.