在使用react-testing-library时使用mocha和chai进行断言?

Question

我想将React测试库添加到使用摩卡和chai进行单元测试的项目中。在编写断言时，我有点难住了，大多数示例都使用了jest和jest-dom。我很喜欢用toBeInTheDocument或toHaveTextContent这样的断言

我想知道是否有一个chai插件是一个合适的替代jest-dom?或者你找到了什么替代方案来使用React测试库和摩卡茶?

Answer 1

chai-dom是另一种选择。它是一个插件，在dom上提供断言的子集。不幸的是，断言不像jest-dom那样具有声明性或广泛性。

使用chai-dom，我们将用exist代替toBeInTheDocument，用text代替toHaveTextContent。

Answer 2

您可以在测试配置文件中扩展匹配器，以使用Jest的匹配器或任何其他匹配器。

1. 安装包含匹配器的@testing-library/jest-dom

2. 确保您指定了mocha的配置文件，这是通过.mocharc.js

   实现的方法之一。

   // .mocharc.js
   module.exports = {  
   ...  
   require: ['test.config.js']  
   };  
   

3. 现在添加到你的test.config.js运行时配置这是为了不同的目的。

   // test.config.js
   // Imports Jest's matchers  
   const extendExpectMatchers = require('@testing-library/jest-dom/matchers');  
   // Imports expects  
   const expect = require('expect');  
   // Extend expects with @testing-library/jest-dom  
   expect.extend(extendExpectMatchers);  
   

然后在测试中像往常一样使用

expect(screen.getByText('Whatever')).toBeInTheDocument();