"Undefined step reference" in WebStorm while trying refer to TypeScript step definition code

Question

While implementing a few test scripts based on cucumber-protractor-typescript logic, I ran into a problem: my Gherkin can not find declaration of the steps:

Steps definition is coded with TypeScript. However, all my tests compiles and runs successfully. There is the same problem as mine, but it didn't solve my problem.

When I am trying to create step definition file manually, there is no option to create TypeScript file, only JavaScript:

Here is my example of step definition:

defineSupportCode(({Given, When, Then, Before}) => {
      let search: Search;

   Before(() => {
       search = new Search();
   });

   Given(/^User on the angular site$/, async () => {
       let title = await browser.getTitle();
       return expect(title).to.equal('Angular');
   });

   When(/^User type "(.*?)" into the search input field$/, async (text: string) => {
       await search.enterSearchInput(text);
   });

   Then(/^User should see some results in the search overlay$/, async () => {
       await search.getSearchResultItems();
       let count = await search.getCountOfResults();
       return expect(count).to.be.above(0);
   });
});

And my cucumber file:

 Feature: Search
   As a developer using Angular
   User need to look-up classes and guidelines
   So that User can concentrate on building awesome apps

 @SearchScenario
   Scenario: Type in a search-term
   Given User on the angular site
   When User type "foo" into the search input field
   Then User should see some results in the search overlay

My repositories structure:

/features
   /steps
    searchSteps.ts
 search.feature
/pages
 search.ts

Does somebody knows how to solve this problem?

Answer 1

Unfortunately WebStorm provides not support for writing Cucumber.js tests in TypeScript. Please vote for WEB-22516 and WEB-29665 to be notified on any progress with TypeScript support