I'm back trying to get 'no-restricted-syntx to work'. I've not got Prevent screen.findByX without an await with eslint no-restricted-syntax? to work, but I have another scenario where I need it. I noticed we were getting some issue related to a similar issue, with the explanation here:
You shouldn't render outside of a test()/it() block. The JSDOM env is global (shared between tests) and the cleanup in the inner describe() is cleaning up the DOM.
I have this kinda code:
beforeEach(async() => {
render(<MyLovelyComponent />);
await waitForElementToBeRemoved(() => screen.getAllByText('dddd'));
});
And I've like to warn/error on that screen being used there.
My attempt at writing the 'no-restricted-syntax' selector, based off some stuff from How to forbid a specific named function with ESlint as well, looks like:
'no-restricted-syntax':[
'error',
{
message: 'No screen outside of it',
selector: `FunctionCall[name!="it"] MemberExpression[object.name="screen"]`
},
],
Here is my current attempt:
But it doesn't seem to be working.
Where have I gone wrong?
While writing this, I ended up double checking the AST Explorer and came up with:
'no-restricted-syntax':[
'error',
{
message: 'No screen inside beforeEach',
selector: `CallExpression[callee.name="beforeEach"] MemberExpression[object.name="screen"]`
},
],
I still haven't got a way to block in in other ways not involving beforeEach but it's a start!