Shared-steps running in incorrect order - Timing issue

[v-morris]

My team has encountered an issue when trying to use Jest-Cucumber's shared-steps with React. We have followed the examples provided in the documentation and also noticed a similar issue listed here. We did try to duplicate the steps provided in that issue, but no luck.

What we noticed is that when importing shared-steps to be reused, the given/when/then will run in the incorrect order, causing our tests to fail and often reading as undefined since it runs the given later. This only happens out of order though when some pieces are imported and others are just defined directly in the step. So in the example below, the when statement is imported from an external reusable file in another directory. I want to note as well that we are using Enzymes mount & shallow functions to render our test wrappers.

Example:

test('Test description', ({ given, when, then }) => {
    given('I am on a tab', () => {
      wrapper = setupMountContext(formikContext, <Component {...props} />);
    });
    whenISelectXforX(when, 'select');
    then(/^I should be able to see an input, () => {
      expect(wrapper.find('input[id="testInputId"]').exists()).toBe(true);
    });
  });

The scenario above will work fine though if I define the reusable step as a global variable in the step file vs importing it. Since that works, what we have been doing to get around this issue is extract our logic into reusable 'run' functions, and defining a global given/when/then at the top of our step file, and executing the 'run' function which contains the logic.

const whenISelectXforX = async (when, selectorType) => {
    when(I_SELECT_X_FOR_X, async (userInput, fieldName) => {
      await runSelectOption({
        wrapper, selectorType, userInput, fieldName,
      });
    });
  };

This is not nearly as reusable as we would like it to be though, as we still have to define these at the top of each step file, vs just importing the whole when statement.

What we also noticed is that this is not an issue if it's a completed shared step that is imported, meaning that the entire reusable scenario is defined in the shared step (given, when, then), and imported to be reused. The one issue we have run into with this though is that our beforeEach runs after the shared-step executes. I did see the documentation about this, but we have been unable to get the beforeEach to execute before each scenario and what we have done is created our own initializers in the test file and execute it at the beginning of each test (which causes duplicate code & a need to remember to do this in those specific files)

  const initializeBeforeEach = () => {
    props = initializeProps();
    jest.clearAllMocks();
    jest.restoreAllMocks();
  };

  test('Test description here', ({
    given, when, then,
  }) => {
    initializeBeforeEach();
    enabledValidEntries({
      given,
      when,
      then,
      props,
      ...scenarioProps,
    });
  });

We have followed all recommended approaches and tried various ones of our own and these are the only solutions we have found so far. This seems like this could be a bug in the package. This is a fantastic package, but this issue we are facing is fairly significant and causing us to have to find workarounds. Any suggestions or assistance is appreciated! Thank you!

[Duongasaur]

Hi, are you using autobind steps for your steps and feature files?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

This issue is closed because there has been no recent activity.