PEST 4 test form submit from JavaScript using Fetch API

4 weeks ago 26
ARTICLE AD BOX

I'm adding Browser tests to a Laravel 12 application using PEST 4. This is an older application that was migrated to the latest version of Laravel.

I want to test some pages that have forms which are submitted using JavaScript Fetch API and FormData object.

The functionality works well in the browser, but when I perform a form submit from PEST, the endpoint that receives the request does not see the attached form data.

I narrowed it down to a simple example to show the problem.

Controller:

class TestController { public function test(Request $request): View|JsonResponse { if ($request->isMethod('POST')) { return response()->json(['message' => $request->get('test_input', 'No input provided')]); } return view('test'); } }

View:

<html> <head> <title>Test page</title> </head> <body> <button id="test_btn">Test</button> <div id="response"></div> <script> document.getElementById('test_btn').addEventListener('click', () => { const formData = new FormData(); formData.append('test_input', 'Hello from JS!'); fetch('/test', { method: 'POST', body: formData }) .then(async response => { const respJson = await response.json(); document.getElementById('response').innerHTML = respJson.message; }); }); </script> </body> </html>

When I press the "Test" button in the browser, I see: Hello from JS!

When I run the following PEST test...

it('test js fetch', function () { $page = visit('/test'); $page->click('Test') ->assertSee('Hello from JS!') ->screenshot(); });

The test fails with the following message:

FAILED Tests\Browser\TestTest > it test js fetch Expected to see text [Hello from JS!] on the page initially with the url [http://php:47865/test], but it was not found or not visible. A screenshot of the page has been saved to [Tests/Browser/Screenshots/it_test_js_fetch]. at tests/Browser/TestTest.php:7 3▕ it('test js fetch', function () { 4▕ $page = visit('/test'); 5▕ 6▕ $page->click('Test') ➜ 7▕ ->assertSee('Hello from JS!') 8▕ ->screenshot(); 9▕ }); 10▕

In the screenshot, the text is: No input provided.

Has anyone encountered this issue and can recommend a fix?

Read Entire Article