When I run a very simple sample test in jest-expo-puppeteer following the guidelines in jest-expo-puppeteer documentation, I keep getting a log of weird errors, and it seems none of the elements expected could be found. So I tried to print out the page:
// Import the config so we can find the host URL
import config from '../../jest-puppeteer.config'
let response
beforeEach(async () => {
// Jest puppeteer exposes the page object from Puppeteer
response = await page.goto(config.url)
})
it(`should have welcome string`, async () => {
const html = await page.evaluate(() => document.documentElement.outerHTML)
console.log(html)
await expect(page).toMatchElement('div[data-testid="welcome"]', { text: 'Welcome!' })
})
The result of the page shows the text Oh no! It looks like JavaScript is not enabled in your browser.:
...
<body>
<!--
A generic no script element with a reload button and a message.
Feel free to customize this however you'd like.
-->
<noscript>
<form
action=""
style="background-color:#fff;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;"
>
<div
style="font-size:18px;font-family:Helvetica,sans-serif;line-height:24px;margin:10%;width:80%;"
>
<p>Oh no! It looks like JavaScript is not enabled in your browser.</p>
<p style="margin:20px 0;">
<button
type="submit"
style="background-color: #4630EB; border-radius: 100px; border: none; box-shadow: none; color: #fff; cursor: pointer; font-weight: bold; line-height: 20px; padding: 6px 16px;"
>
Reload
</button>
</p>
</div>
</form>
</noscript>
<!-- The root element for your Expo app. -->
<div id="root"><div class="css-view-1dbjc4n r-flex-13awgt0 r-pointerEvents-12vffkv"><div class="css-view-1dbjc4n r-flex-13awgt0 r-pointerEvents-12vffkv"></div></div></div>
<script src="/static/js/bundle.js"></script>
</body></html>
...
This happens for both headless and in-browser execution.
So it looks like Javascript is turned off. The page object is created internally by jest-expo-puppeteer, so I wonder:
- How to turn on JavaScript in
jest-expo-puppeteer? - Shouldn't this be turned on by default? Perhaps there is something that I missed out in my setup?
I've found out the answer myself:
Oh no! It looks like JavaScript is not enabled in your browser.is always present in react-native file. It seems to server as a backup (in case the browser indeed doesn't have JavaScript enabled it will be shown).