describe.each not testing not.${outcome} properly

[sonya-invoicesimple]

Hi,

I am trying to write following test to clean huge test files:

it.each`
         component       |   outcome
      ${'ComponentA'} | ${'toBeInTheDocument'}
      ${'ComponentB'} | ${'not.toBeInTheDocument'}
`

However, when I try to assert each test like this:

expect(component)[outcome]()

I run into an issue that positive outcome goes through, while not just breaks the tests and throws following TypeError in console:

$     TypeError: expect(...)[outcome] is not a function

      const test = screen.queryByTestId('test');
      251 |       expect(test).toBeInTheDocument();
    > 252 |       expect(test)[outcome]();

I am aware that you can work around this bottleneck with true/false statuses and toHaveAttribute or if...else checker, however former option limits your pool of assertions while latter is a very bad practice for testing.

Do you know if there is a way to make not.toBeInTheDocument (or honestly any other assertion) work without throwing TypeError?

[gnapse]

I do not see a way to easily do this. It's a bit "hacky", TBH.

A few ways in which I see you can go forward with this approach:

Note
I have not tried any of these so I do not know to what extent they'd work, of if I made a typo or incorrect use of some of the APIs involved.

(1) Using lodash's get (ref)

get(expect(component), outcome)()

Pros: ??
Cons: too clever, not readable or easily understandable

(2) Checking it explicitly

it.each`
         component       |   outcome
      ${'ComponentA'} | ${'toBeInTheDocument'}
      ${'ComponentB'} | ${'not.toBeInTheDocument'}
`({ component, outcome })('test', () => {
    if (outcome === 'not.toBeInTheDocument') {
        expect(component).not.toBeInTheDocument()
    } else {
        expect(component)[outcome]()
    }
})

Pros: explicit intent (explicit is good, no magic involved)
Cons: too verbose perhaps, not as fancy maybe?

(3) Checking for the .not prefix

it.each`
         component       |   outcome
      ${'ComponentA'} | ${'toBeInTheDocument'}
      ${'ComponentB'} | ${'not.toBeInTheDocument'}
`({ component, outcome })('test', () => {
    if (outcome.startsWith('not.') {
        const assertion = outcome.slice(4)
        expect(component).not[assertion]()
    } else {
        expect(component)[outcome]()
    }
})

Pros: explicit enough, not super "magical"
Cons: not sure, maybe also too verbose for what you expected, but IMO trying to make this too clever and succinct is not good.