Typescript with async and await: Variable is used before being assigned.ts(2454)

Question

Why is typescript complaining here that variable is unassigned? Am I missing something obvious with scopes?

test('test', async () => {
  let renderResult: RenderResult;
  await act(async () => {
    renderResult = render(<Component />);
  });

  await act(async () => {
    renderResult.rerender(<Component />);
  });
  // ERRROR: Variable 'renderResult' is used before being assigned.ts(2454)
  expect(renderResult.container.firstElementChild!.getAttribute('src')).toBe('original');
});

Answer 1

You are getting this error, because you have "strictNullChecks": true in your tsconfig.json. So the compiler shows you that the variable is possibly has value of undefined.

Options here are

• to initialize the variable with a null-object instance (or empty values like "" for String, [] for Array, etc),
• to use non-null assertion operator (
  expect(renderResult!.container.firstEleme... ),
• disable the strictNullChecks in your tsconfig.json,
• or any other way of checking for undefined or asserting the value to be not undefined.

But IMHO if you are using strictNullChecks, you should consider using null-object pattern.