Testing Asynchronous Code

https://jestjs.io/docs/asynchronous

Callbacks#

The most common asynchronous pattern is callbacks.

Ví dụ: giả sử bạn có một hàm fetchData (gọi lại) tìm nạp một số dữ liệu và gọi hàm gọi lại (dữ liệu) khi nó hoàn tất. Bạn muốn kiểm tra xem dữ liệu trả về này có phải là chuỗi 'bơ đậu phộng' không.

// Don't do this!
test('the data is peanut butter', () => {
  function callback(data) {
    expect(data).toBe('peanut butter');
  }
  fetchData(callback);
});

Vấn đề là quá trình kiểm tra sẽ hoàn thành ngay sau khi fetchData hoàn thành, trước khi thực hiện lệnh gọi lại.

Có một hình thức kiểm tra thay thế để khắc phục điều này. Thay vì đặt kiểm tra trong một hàm với một đối số trống, hãy sử dụng một đối số duy nhất được gọi là done. Jest sẽ đợi cho đến khi gọi lại xong trước khi kết thúc quá trình kiểm tra.

test('the data is peanut butter', done => {
  function callback(data) {
    try {
      expect(data).toBe('peanut butter');
      done();
    } catch (error) {
      done(error);
    }
  }
  fetchData(callback);
});

Promises

If your code uses promises, use the .then method.

test('the data is peanut butter', () => {
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

If you expect a promise to be rejected, use the .catch method.

test('the fetch fails with an error', () => {
  expect.assertions(1);
  return fetchData().catch(e => expect(e).toMatch('error'));
});

.resolves / .rejects

Bạn cũng có thể sử dụng trình so khớp .resolves trong câu lệnh mong đợi của mình và Jest sẽ đợi lời hứa đó được giải quyết. Nếu lời hứa bị từ chối, bài kiểm tra sẽ tự động thất bại.

test('the data is peanut butter', () => {
  return expect(fetchData()).resolves.toBe('peanut butter');
});

Bạn cũng có thể sử dụng trình so khớp .resolves trong câu lệnh mong đợi của mình và Jest sẽ đợi lời hứa đó được giải quyết. Nếu lời hứa bị từ chối, bài kiểm tra sẽ tự động thất bại.

test('the fetch fails with an error', () => {
  return expect(fetchData()).rejects.toMatch('error');
});

Async/Await

Ngoài ra, bạn có thể sử dụng async và chờ đợi trong các thử nghiệm của mình. Để viết kiểm tra không đồng bộ, hãy sử dụng từ khóa không đồng bộ ở phía trước hàm được truyền để kiểm tra. Ví dụ: có thể kiểm tra cùng một kịch bản fetchData với:

test('the data is peanut butter', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (e) {
    expect(e).toMatch('error');
  }
});

You can combine async and await with .resolves or .rejects.

test('the data is peanut butter', async () => {
  await expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  await expect(fetchData()).rejects.toMatch('error');
});