未安装Chai，Vitest测试为何报错“Invalid Chai property: toHaveValue”？

我编写了如下Vitest测试代码：

import React from 'react';
import { expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { StyledNativeTimePicker } from '../timePicker/StyledNativeTimePicker.jsx';

...

it('Shows the time correctly', async () => {
  const time = '12:00';
  render(
    <StyledNativeTimePicker
      time={time}
      timeChanged={() => {}}
    ></StyledNativeTimePicker>
  );
  const testInput = screen.getByRole('input', { type: 'time' });
  expect(testInput).toHaveValue(time);
});
...

运行测试后出现错误提示：

Error: Invalid Chai property: toHaveValue

但我并未安装Chai，请问这是什么原因？

原因分析 #

• Vitest默认内部集成了Chai断言库，不需要手动安装就能使用Chai的基础断言能力，所以报错会显示Chai相关的信息。
• toHaveValue并非Vitest或Chai的原生断言方法，它是@testing-library/jest-dom提供的扩展断言，你的测试环境没有引入这个库，导致断言无法被识别，从而触发错误。

解决方法 #

1. 安装@testing-library/jest-dom依赖

npm install --save-dev @testing-library/jest-dom

2. 在测试环境中启用该扩展

   • 方法一：在测试文件顶部直接导入

     import '@testing-library/jest-dom/vitest'
     

   • 方法二：在Vitest配置文件（如vitest.config.js）中配置全局setup文件，确保所有测试都能加载该扩展：

     export default defineConfig({
       test: {
         setupFiles: ['./setupTests.js'],
       },
     })
     

     然后在setupTests.js中添加：

     import '@testing-library/jest-dom/vitest'
     

3. 替代方案：使用原生断言
   如果不想额外安装库，也可以直接读取DOM元素的value属性用原生断言判断：

expect(testInput.value).toBe(time);

内容的提问来源于stack exchange，提问作者Chen Peleg