Question

我正在尝试为React组件编写单元测试-看起来大致如下-

db的句柄传递给组件
该组件还将data作为props接收（这将发生变化）-也许这可以通过Redux存储来实现。
现在我在useEffect中所做的data更改是-写入indexDB（实际上使用idb库），然后写入success ，我读取了其中一些数据，并使用setData设置了本地状态，并将此状态用于render

基本上上述所有方法均有效-因此没有问题（可能不正确，但是有效！）。我的挑战是如何为此代码编写单元测试。我看过在async中使用jest。

代码如下所示-


const Component = ({db, data}) => {

  useEffect(() => {
    const saveDataToDB = (data, successCB) => {
       const tx = db.transaction("store", "readwrite");
       
       const transactions = [tx.store.add(data)];
       transactions.push(tx.done);
  
       Promise.all(transactions).then((res) => {
          successCB();
       });
       
      const cb = () => {
          // Do somethingl
       }; 
       
       saveDataToDb(data, cb);

    };

  }, [data]);

   // Rendering part. 
   return (
     <div id="component-div">


     </div>


   );


};

export default Component;

并且我正在尝试使用类似于以下内容的东西为此组件编写测试


describe('Component Tests', () => {
  
  it("Component Renders with Data", () => {
    const wrapper = mount(<Component data={data} db={db}/>);
    expect(wrapper.find("#component-div").toEqual(true);

  });


});

可能是-组件的实现方式出了问题，这使单元测试具有挑战性。但这是可行的，所以总体上不确定要对可能有一些承诺链解决的组件进行单元测试的策略是什么？

Answer 1

react testing library支持async APIs。它们可以用来解决上述问题。

这将需要将测试用例转换为async个测试用例，然后如上所述await个API正确使用async。

原始测试用例提到了enzyme API，而不是使用react-testing-library API。

对React组件内部的异步代码（indexedDB）进行单元测试

1 个答案: