End-to-end Tests
One popular approach to testing your JavaScript page components is to use an end-to-end testing tool like Cypress or Pest. These are browser automation tools that allow you to run real simulations of your app in the browser. These tests are known to be slower; however, since they test your application at the same layer as your end users, they can provide a lot of confidence that your app is working correctly. And, since these tests are run in the browser, your JavaScript code is actually executed and tested as well.Client-Side Unit Tests
Another approach to testing your page components is using a client-side unit testing framework, such as Vitest, Jest, or Mocha. This approach allows you to test your JavaScript page components in isolation using Node.js.Endpoint Tests
In addition to testing your JavaScript page components, you will likely want to also test the Inertia responses that are returned by your server-side framework. A popular approach to doing this is using endpoint tests, where you make requests to your application and examine the responses. Laravel provides tooling for executing these types of tests. However, to make this process even easier, Inertia’s Laravel adapter provides additional HTTP testing tools. Let’s take a look at an example.inertiaProps method to retrieve the props returned in the response. You can pass a key to retrieve a specific property, and nested properties are supported using “dot” notation.
assertInertia method and the available assertions in detail. First, to assert that the Inertia response has a property, you may use the has method. You can think of this method as being similar to PHP’s isset function.
has method.
has method may also be used to scope properties in order to lessen repetition when asserting against nested properties.
where assertion.
etc method exists.
missing method is the exact opposite of the has method, ensuring that the property does not exist. This method makes a great companion to the etc method.
Testing Partial Reloads
You may use thereloadOnly and reloadExcept methods to test how your application responds to partial reloads. These methods perform a follow-up request and allow you to make assertions against the response.
reloadOnly or reloadExcept.
Testing Deferred Props
You may use theloadDeferredProps method to test how your application responds to deferred props. This method performs a follow-up request to load the deferred properties and allows you to make assertions against the response.
loadDeferredProps method.
loadDeferredProps.