Unit testing not making any sense

Question

I doing some unit tests using Jest for React.

For some reason, when I'm expecting it to not be null, it Received null in the response.

describe('Components: FlightSummary', () => {
  it('should render local time by default', () => {
    const { queryByText } = render();

    ['18:10', '18:15', '18:18', '18:23', '18:30', '18:35'].forEach(
      timeValue => {
        expect(queryByText(timeValue)).not.toBeNull();
      }
    );

expect(received).not.toBeNull()

Received: null

  62 |     ['18:10', '18:15', '18:18', '18:23', '18:30', '18:35'].forEach(
  63 |       timeValue => {
> 64 |         expect(queryByText(timeValue)).not.toBeNull();
     |                                            ^
  65 |       }
  66 |     );

And when I change the code to expect null, it Received a value in the response.

describe('Components: FlightSummary', () => {
  it('should render local time by default', () => {
    const { queryByText } = render();

    ['18:10', '18:15', '18:18', '18:23', '18:30', '18:35'].forEach(
      timeValue => {
        expect(queryByText(timeValue)).toBeNull();
      }
    );

expect(received).toBeNull()

Received: <div>18:10</div>

  62 |     ['18:10', '18:15', '18:18', '18:23', '18:30', '18:35'].forEach(
  63 |       timeValue => {
> 64 |         expect(queryByText(timeValue)).toBeNull();
     |                                        ^
  65 |       }
  66 |     );

I have no idea what's going on; have never seen this before. ToT

Answer 1

In a quite recent version of Jest describe.each and test.each were added, which will help you with the visibility of what exactly have failed.

You can try this instead:

describe('Components: FlightSummary', () => {
  it.each(
    ['18:10', '18:15', '18:18', '18:23', '18:30', '18:35']
  )('should render local time (%s) by default', (timeValue) => {
    const { queryByText } = render();

    expect(queryByText(timeValue)).toBeNull();
  })
})