feat: no-await-react-state in /react ruleset

[codejedi365]

Feature Request

Create a rule that warns against bad patterns which do not use the Smart Assertion Query mechanism when using the getReact() client function.

Problem & Goal

If using testcafe-react-selectors, you can retrieve the React Component State through a ReactSelector("MyComponent").getReact() call. If the statement is prepended with await then it will return a static object of the current state of react component upon the resolution of the client function. In the case react was still processing this could cause brittle test cases. Recommend using the Smart Assertion pattern through the use of getReact() and passing the client function directly into the t.expect() method.

The goal is to prevent brittle test cases by enabling the Smart Assertion callback to use the ClientFunction returned by getReact() inside t.expect()'s.

Expected behavior

// page.test.js -- invalid code
import { ReactSelector } from 'testcafe-react-selectors';

fixture `TODO list test`
	.page('http://localhost:1337');

test('Check list item', async t => {
    const el         = ReactSelector('TodoList');
    const component  = await el.getReact();

    await t.expect(component.props.priority).eql('High');
    await t.expect(component.state.isActive).eql(false);
    await t.expect(component.key).eql('componentID');
});

# Run
eslint ./page.test.js

// page.test.js -- correct code
import { ReactSelector } from 'testcafe-react-selectors';

fixture `TODO list test`
	.page('http://localhost:1337');

test('Check list item', async t => {
    const el         = ReactSelector('TodoList');
    const component  = el.getReact();   // Returns ClientFunction()

    // Smart Assertion Query Mechanism enabled
    await t.expect(component.props.priority).eql('High');
    await t.expect(component.state.isActive).eql(false);
    await t.expect(component.key).eql('componentID');
    // Alternatives without reuse
    // await t.expect(el.getReact(({ state }) => state.isActive)).eql(false);
    // await t.expect(el.getReact().key).eql('componentID');
});