笑谈前端 Jest 阶（二）

2024-02-24 02:10:20

深入探索 Jest：Mock 异步方法、类、定时器、快照测试和 DOM 测试

Mock 异步方法

Jest 不仅支持 Mock 函数，还支持 Mock 异步方法，让我们能够模拟异步函数的调用和行为。

Mock 定时器

定时器是 Jest 能够 Mock 的另一种异步方法。通过使用 jest.useFakeTimers() 方法，我们可以 Mock 定时器。

代码示例：

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  await delay(1000);
  console.log('hello world!');
}

main();

Jest 测试：

it('should log hello world after 1 second', async () => {
  jest.useFakeTimers();
  const spy = jest.spyOn(console, 'log');

  main();

  // 快进 1 秒
  jest.advanceTimersByTime(1000);

  expect(spy).toHaveBeenCalledWith('hello world!');
});

通过 Mock 定时器，我们可以模拟 delay(1000) 函数的调用，并在测试中快进时间 1 秒。

快照测试

快照测试是一种方便的方法，用于测试组件的渲染结果。Jest 的 toMatchSnapshot() 方法可用于此目的。

代码示例：

const MyComponent = () => {
  return (
    <div>
      Hello world!
    </div>
  );
};

Jest 测试：

it('should render correctly', () => {
  const wrapper = shallow(<MyComponent />);

  expect(wrapper).toMatchSnapshot();
});

Jest 将组件的渲染结果保存在文件中。在后续测试运行中，它会将新的渲染结果与保存的快照进行比较。如果两者不一致，测试将失败。

DOM 测试

Jest 还支持 DOM 测试，让我们能够测试组件与 DOM 的交互。它提供诸如 document、window 和 HTMLElement 等对象用于此目的。

代码示例：

const MyComponent = () => {
  return (
    <div>
      <button onClick={() => alert('hello world!')}>Click me</button>
    </div>
  );
};

Jest 测试：

it('should alert hello world when the button is clicked', () => {
  const wrapper = shallow(<MyComponent />);

  const button = wrapper.find('button');

  button.simulate('click');

  expect(window.alert).toHaveBeenCalledWith('hello world!');
});

此测试通过模拟按钮的点击事件，检查 window.alert 是否被调用且传递了正确的参数。