React Native with TypeScript and cucumber-js: Importing TypeScript Functions into Cucumber Step Definitions

Question

As the title states, I'm looking to test some functions we use in a React Native app. Indeed, in the future I would like to write business functions based on our cucumber tests - so ideally my dev workflow would begin with me creating a test in our code base and wrestling with it until it meets all tests. However, I'm running into a problem that whenever I import said functions from our codebase, cucumber breaks and the tests don't run. So far, using detox for end-to-end testing has worked fine (interacting with elements via TestID and so on), but in a recent set of tests, I was trying to call a function explicitly, and this is where we start to run into errors.

We allow for cucumber tests in TypeScript by writing the following in our cucumber.js file:

let common = [
   'features/**/*.feature',                // Specify our feature files
   '--require-module ts-node/register',    // Load TypeScript module
   '--require features/support/**/*.ts',   // Load support files
   '--require step_definitions/**/*.ts',   // Load step definitions
].join(' ');

module.exports = {
  default: common,
};

However, in my step_definitions, as soon as I try and import a function from our React Native project, I start getting errors like this one, for example from react-native:

/Users/file/path/to/project/here/node_modules/react-native/index.js:14
import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Object.require.extensions.<computed> [as .js] (/Users/file/path/to/project/here/node_modules/ts-node/src/index.ts:1300:43)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/file/path/to/project/here/src/helpers/utils.ts:2:1)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Module.m._compile (/Users/file/path/to/project/here/node_modules/ts-node/src/index.ts:1310:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/file/path/to/project/here/node_modules/ts-node/src/index.ts:1313:12)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
codepath: /Users/file/path/to/project/here/step_definitions/5-Chat/2-1-chat-deletion-indicator.steps.ts

I see here that the commonjs (cjs) module is firing the error. I understand that React Native is written for ES6, so commonjs is wrong in the first place. What I don't know how to do is keep my fancy cucumber.js setup file and the ability to keep my tests (and imported functions) in TypeScript without ts-node complaining.

Any assistance, pointers, or ideas here would be greatly appreciated. I'll be glad to include any other configs and files needed.

Answer 1

For tests on single functions (in this case these are unit tests), I have since begun to use jest-cucumber - this has it's own configuration and does not need use of such cucumber.js file. This cucumber.js file pattern is from using cucumber with an E2E framework like detox.