mainfraame

import {isEqual} from "lodash";
import {outdent} from "outdent";
import {act} from "react-dom/test-utils";
import {fireEvent} from "@testing-library/react";
import {dblClick} from "@testing-library/user-event";

export type JSDOMElementProps = {
    id?: string;
    root?: string;
    selector?: string;

mainfraame

import Element from './path/to/Element'

// imagine this element <input type="text" data-test-id="foo"/>

const $element = new Element({
   id: 'foo'
});


$element.setValue('bar');

mainfraame

import {isEqual} from "lodash";
import {outdent} from "outdent";
import {act} from "react-dom/test-utils";
import {fireEvent} from "@testing-library/react";

export type ElementProps = {
    id?: string;
    root?: string;
    selector?: string;
};

mainfraame

{
  "moduleFileExtensions": [
    "feature", // <--- *1
  ],
  "setupFilesAfterEnv": [
    "<rootDir>/node_modules/cucumber-jest/dist/init.js", // <--- *2
    "<rootDir>/test/world.ts",
    "<rootDir>/test/hooks.tsx",
    "<rootDir>/test/steps.ts"
  ],

mainfraame

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils'
import { AfterAll, BeforeAll } from 'cucumber';

import App from './path/to/your/app';

const $root = document.createElement('div');

document.body.appendChild($root);

mainfraame

import { setWorldConstructor } from 'cucumber';

setWorldConstructor(
    class World {
       // this class gets instantiated before the tests start and 
       // the value created from that instatiation is what is available in hooks and steps as "this"
    }
);

mainfraame

import { Given, When, Then } from 'cucumber';
import { act } from 'react-dom/test-utils';

import Element from './path/to/Element';

Given(/I go to (.*)$/, function(link) {
    window.location.hash = `#/${link}`;
});

When(/I click the (\S+) button$/, function(id) {

mainfraame

Feature: Button

Given I go to home
When I click the login button
Then the login button is not visible