React

Create React App

If your project uses create-react-app, Quokka will automatically configure itself to launch in an environment that is very similar to the environment that jest uses when it runs your create-react-app tests.

When using create-react-app Quokka’s configuration will be automatically set to:

{
  "plugins": ["jsdom-quokka-plugin"],
  "babel": {
    "ts": true,
    "presets": ["react-app"]
  }
}

You may disable Quokka’s automatic configuration for create-react-app projects by adding an autoDetect Quokka setting with a value of false as shown below:

{
  "autoDetect": false
}

When you run your create-react-app code in the browser, when you navigate to a page (e.g. index.html) the react-runtime + browser load your user interface and any necessary components for you.

When using Quokka, you need to simulate the loading that normally happens in the browser by adding some code. You also need to simulate any interaction with your page as you would do with the user interface. If you have a simple functional component (see below):

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  count; //?

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

Then you will need to load it into the DOM manually, simulating what the browser and react-runtime would do for you by adding code to the end of your file.

The steps for simulating what the react-runtime does differ based on the version of react that you are using.

React 18+

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  count; //?

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

/**********
 * Add necessary imports and tell react to render your component into the DOM
 *********/
import * as ReactDOM from 'react-dom/client';
import { act } from 'react-dom/test-utils';

// Tell react that we are in a test environment
global.IS_REACT_ACT_ENVIRONMENT = true;

// Get a handle to the DOM element that we want to render into
const container = document.getElementById('root');

// Render your component into the DOM
// The act function is required to ensure that the component is rendered synchronously
act(() => {
  const root = ReactDOM.createRoot(container);
  root.render(<App />);
});

// Log the DOM to the console
console.log(container.innerHTML);

React < 18

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  count; //?

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

/**********
 * Add necessary imports and tell react to render your component into the DOM
 *********/
import ReactDOM from 'react-dom';
import React from 'react';
ReactDOM.render(<App />, document.getElementById('root'));

If the react code requires additional runtime components (e.g. props or redux) then you will also need to initialize these in your code before rendering your component into the DOM.

React Native

When react-native runs, it has access to device-specific APIs that are not natively available in the node.js runtime, which means they will not work in Quokka.

You may use Quokka.js within react-native projects but are likely to encounter errors if you attempt to import code with React components, or if you import any code that uses device-specific APIs.