fireEvent with Promises

[timdeschryver]

Based on testing-library/dom-testing-library#609, I think we could add a new rule. I'm not 100% sure if it's worth it, because:

• testing library already added a runtime error
• in TypeScript projects, this will already be caught (I think)
• the current implementation of the rule doesn't catch all cases, and I'm not sure if it can. Currently it catches fireEvent(Promise), fireEevent(new Promise(), fireEvent(findBy...)

The implementation of the rule might look like this.
What do you tink?

export default ESLintUtils.RuleCreator(getDocsUrl)<Options, MessageIds>({
  name: RULE_NAME,
  meta: {
    type: 'suggestion',
    docs: {
      description: 'TK',
      category: 'Best Practices',
      recommended: false,
    },
    messages: {
      noPromiseInEvent: 'TK',
    },

    fixable: 'code',
    schema: [],
  },
  defaultOptions: [],

  create(context) {
    return {
      'ImportDeclaration[source.value=/testing-library/]'(
        node: TSESTree.ImportDeclaration
      ) {
        const fireEventImportNode = node.specifiers.find(
          specifier =>
            isImportSpecifier(specifier) &&
            specifier.imported &&
            'fireEvent' === specifier.imported.name
        ) as TSESTree.ImportSpecifier;

        const {references} = context.getDeclaredVariables(fireEventImportNode)[0];

        for (const reference of references) {
          const referenceNode = reference.identifier;
          if (
            isMemberExpression(referenceNode.parent) &&
            isCallExpression(referenceNode.parent.parent)
          ) {
            const [element] = referenceNode.parent.parent
              .arguments as TSESTree.Node[];
            if (element) {
              if (isCallExpression(element) || isNewExpression(element)) {
                const methodName = isIdentifier(element.callee)
                  ? element.callee.name
                  : isMemberExpression(element.callee) &&
                    isIdentifier(element.callee.property)
                  ? element.callee.property.name
                  : '';

                if (
                  ASYNC_QUERIES_VARIANTS.includes(methodName) ||
                  methodName === 'Promise'
                ) {
                  context.report({
                    node: element,
                    messageId: 'noPromiseInEvent',
                  });
                }
              }
            }
          }
        }
      },
    };
  },
});

[Belco90]

Oh wow, I didn't even know about this error and I just realized I suffered it!

It could be a good addition to help users spotting the issue in this particular case, though having already a runtime error from testing library seems enough, doesn't it? Not sure what we should do, but you almost got the implementation 😅

[gndelia]

in TypeScript projects, this will already be caught (I think)

confirming that ☝️

The library (in runtime) and TS (in compile time) also offer a good coverage against the scenario, but given the implementation is almost done, I'd say let's go with it 😄

[timdeschryver]

👍 I'll add it later this week with and add test cases/docs, we can still decide if we want to add it then 🙂
Thank god I added the code here.... since I just reverted by changes locally 😂

[Belco90]

Sorry I had to do it

[github-actions]

🎉 This issue has been resolved in version 4.0.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀