Integration testing

Learn how to write integration tests for your integration.

When writing integration tests, it's generally recommended to avoid relying on external services for faster and more reliable results.

The React SDK allows you to set up a custom endpoint so you can mock responses and test your integration without relying on our servers.

Set a custom endpoint

You can run tests against a mock server by specifying custom endpoints. To do this, specify the base endpoint URL when you initialize the SDK.

src/App.jsx

1234567891011
import {CroctProvider} from '@croct/plug-react';

export default function App() {
  return (
    <CroctProvider appId="APPLICATION_ID" baseEndpointUrl="http://localhost:3000">
      <div>
        <h1>My first personalized app 🚀</h1>
      </div>
    </CroctProvider>
  );
}

And these are the endpoints you can mock:

Path	Description
/client/web/cid	Endpoint for assigning a CID.
/client/web/evaluate	Endpoint for query evaluation.
/client/web/track	Endpoint for tracking events.
/content	Endpoint for content retrieval.

Notice that if you enable the test mode, you do not need to mock the /client/web/track endpoint, as the SDK replaces the transport layer with a fake one that simulates successful calls.

Create a mock server

Mockoon is a free and open-source tool for quickly mocking APIs and services. You can define rules to mock different responses based on request parameters, which is perfect for testing different slots and query results.

To get started, install the Mockoon CLI :

npm install -g @mockoon/cli

Then, create a configuration file named croct.json with your mock rules. The easiest way to do this is to use the Mockoon desktop app , which generates a configuration file for you.

Response body

We recommend using the body from an actual content or query evaluation response to ensure that it matches the real one.

Here is an example of a configuration file that mocks the content of a slot named home-hero and the result of the query user is returning:

croct.json

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
{
  "uuid": "4b9baabf-9953-4f2f-bc7f-ee45ef2aad8f",
  "lastMigration": 22,
  "name": "Croct",
  "endpointPrefix": "",
  "latency": 0,
  "port": 3000,
  "hostname": "0.0.0.0",
  "routes": [
    {
      "uuid": "0e12ece9-2173-4a50-aeed-7f1ecfbe80f4",
      "documentation": "Content for \"home-hero\" slot.",
      "method": "post",
      "endpoint": "content",
      "responses": [
        {
          "uuid": "3b3d03fa-c92f-465b-a1b9-56fba1a53221",
          "body": "{\n  \"content\": {\n    \"_component\": \"hero-banner@1\",\n    \"title\": \"Banner title\",\n    \"subtitle\": \"Banner subtitle\",\n    \"cta\": {\n      \"label\": \"Button\",\n      \"link\": \"https://croct.com\"\n    }\n  }\n}",
          "latency": 0,
          "statusCode": 200,
          "label": "",
          "headers": [],
          "filePath": "",
          "sendFileAsBody": false,
          "rules": [
            {
              "target": "body",
              "modifier": "slotId",
              "value": "home-hero",
              "invert": false,
              "operator": "equals"
            }
          ],
          "rulesOperator": "OR",
          "disableTemplating": false,
          "fallbackTo404": false,
          "default": true
        }
      ],
      "enabled": true,
      "responseMode": null
    },
    {
      "uuid": "d41789d9-fe4d-42d4-93a8-f0ebab7bde01",
      "documentation": "Evaluation result for \"user is returning\"",
      "method": "get",
      "endpoint": "client/web/evaluate",
      "responses": [
        {
          "uuid": "4e6b250d-b601-4437-8341-52271f7a63c7",
          "body": "false",
          "latency": 0,
          "statusCode": 200,
          "label": "",
          "headers": [],
          "filePath": "",
          "sendFileAsBody": false,
          "rules": [
            {
              "target": "body",
              "modifier": "query",
              "value": "user is returning",
              "invert": false,
              "operator": "equals"
            }
          ],
          "rulesOperator": "OR",
          "disableTemplating": false,
          "fallbackTo404": false,
          "default": true
        }
      ],
      "enabled": true,
      "responseMode": null
    }
  ],
  "proxyMode": false,
  "proxyHost": "",
  "proxyRemovePrefix": false,
  "tlsOptions": {
    "enabled": false,
    "type": "CERT",
    "pfxPath": "",
    "certPath": "",
    "keyPath": "",
    "caPath": "",
    "passphrase": ""
  },
  "cors": true,
  "headers": [
    {
      "key": "Content-Type",
      "value": "application/json"
    }
  ],
  "proxyReqHeaders": [
    {
      "key": "",
      "value": ""
    }
  ],
  "proxyResHeaders": [
    {
      "key": "",
      "value": ""
    }
  ]
}

Lastly, run the following command to start the mock server:

mockoon start --config croct.json

After starting the mock server, accessing your application should return the mocked content and query results.