title: Cannot parse local JSON Data in the puppeteer-jest test framework?
body: <p>I need to test the product using Jest+Puppeteer. I locate locators from the front-end in the different location that a Page Object and I need to import that JSON to the Page Object. But when I try to parse using <code>JSON.parse()</code> I receive:</p>
  
  <blockquote>
    <p>SyntaxError: Unexpected token. </p>
  </blockquote>
  
  <p>All research all of the question in the Stack Overflow, but nothing is helps. </p>
  
  <p>Page Object:</p>
  
  <pre><code>import { waitForNavigation, click, type, pressEnter} from './base';
  import { listsPageLocators } from '../constants/locators/listPage.json';
  
  async function clickSearchByCompanyName(page){
      click(page, listsPageLocators.searchByCompanyNameBtn);
      waitForNavigation(page);
  }
  </code></pre>
  
  <p>JSON:</p>
  
  <pre><code>{
      "findNewProspectsBtn" : {
          "locator" : "li.search-leads",
          "name" : "Find New Prospects Button"
      },
      "searchByCompanyNameBtn" : {
          "locator" : "li.company-name &gt; a",
          "name" : "Search By Company Name Button"
      },
      "leadEnrichmentBtn" : {
          "locator" : "li.lead-enrichment",
          "name" : "Lead Enrichment Button"
      },
      "importUrlsBtn" : {
          "locator" : "li.import-urls",
          "name" : "Import URLs Button"
      },
      "listsNameFld" : {
          "locator" : "span.name",
          "name": "List Name Field"
      },
      "searchIndustryOrCompanyField" : {
          "locator" : "input.select2-search__field",
          "name" : "Search Industry Or Company Field"
      },
      "advancedSearchBtn" : {
          "locator" : "a[ng-click='goToAdvancedSearch()']",
          "name" : "Advanced Search Button"
      }
  }
  </code></pre>
  
  <p>Base Page Object with click method:</p>
  
  <pre><code>async function click(page, JsonObject, text) {
      console.log(JsonObject);
      const locatorData = JSON.parse(JsonObject);
      if (typeof text !== 'undefined') {
          const el = await selectContains(page).getElement(`${locatorData.locator}:contains(${text})`);
          el.click();
          console.log(`Click on ${locatorData.name} which contains ${text}`);
      } else {
          await page.click(locatorData.locator);
          console.log(`Click on ${locatorData.name}`);
      }
  }
  </code></pre>
  
  <p>Error:</p>
  
  <p>● Single company page Tests: › C297679 - Open the company page from the list</p>
  
  <pre><code>SyntaxError: Unexpected token o in JSON at position 1
      at JSON.parse (&lt;anonymous&gt;)
  
    54 | async function click(page, JsonObject, text) {
    55 |     console.log(JsonObject);
  &gt; 56 |     const locatorData = JSON.parse(JsonObject);
       |                              ^
    57 |     if (typeof text !== 'undefined') {
    58 |         const el = await selectContains(page).getElement(`${locatorData.locator}:contains(${text})`);
    59 |         el.click();
  
    at parse (pages/base.js:56:30)
    at Object.clickViewList (pages/add-company-by-name-popup.js:29:5)
    at Object.clickViewList (company-page-e2e.js:29:35)
  </code></pre>
  
  <p>I expected that can be imported locators from the different JSON and implement it in the page object. But actually, I receive an error.</p>