如何使用 Hooks 和 PubSub-js 使用 Jest Enzyme 测试 React

如何解决如何使用 Hooks 和 PubSub-js 使用 Jest Enzyme 测试 React

你好，我有一个简单的应用程序，它连接到一个主题，然后更新他的状态，在玩的时候似乎可以正常工作，但是我在如何正确地为它编写测试方面遇到了问题我使用了一个库 https://www.npmjs.com/package/pubsub-js

import React,{ useState,useEffect } from 'react'
import PubSub from 'pubsub-js'

const App = () => {

 const [data,setData] = useState([])

 const mySub = (msg,pubData) => {
  setData(pubData)
 }

 useEffect(() => {
  const token = PubSub.subscribe('TOPIC',mySub);

  return () => {
   PubSub.unsubscribe(token)
  };
 },[]);

 return (
  <input onChange={() => {}} value={data && data[0]?.value}
 )
};

import React from 'react'
import PubSub from 'pubsub-js'
import { mount } from 'enzyme'
import App from '.'

const mocked = [{ value: 1}]
describe('should receive some date',() => {
 it('xx',() => {
  const app = mount(<App />)
  PubSub.publish('TOPIC',mocked);
  PubSub.publishSync('TOPIC',mocked);
  // WHAT NEXT?
 })
})

我试过了间谍，查找输入并检查值，但没有任何变化......为什么？我应该如何测试这个 Function 组件？

解决方法

由于 PubSub.publishSync() 操作将触发更新组件状态的 mySub 事件处理程序。确保将导致 React 状态更新的代码包装到 act() 中，否则，您将收到警告：

警告：测试中的 App 更新未包含在 act(...) 中。

例如

index.jsx：

import React,{ useState,useEffect } from 'react';
import PubSub from 'pubsub-js';

export const App = () => {
  const [data,setData] = useState('a');

  const mySub = (msg,pubData) => {
    setData(pubData);
  };

  useEffect(() => {
    const token = PubSub.subscribe('TOPIC',mySub);

    return () => {
      PubSub.unsubscribe(token);
    };
  },[]);

  return <div>{data}</div>;
};

index.test.jsx：

import React from 'react';
import PubSub from 'pubsub-js';
import { mount } from 'enzyme';
import { App } from './';
import { act } from 'react-dom/test-utils';

describe('67422968',() => {
  it('should receive data and update the state',() => {
    const wrapper = mount(<App />);
    expect(wrapper.text()).toBe('a');
    act(() => {
      PubSub.publishSync('TOPIC','b');
    });
    expect(wrapper.text()).toBe('b');
  });
});

测试结果：

 PASS  examples/67422968/index.test.tsx (7.254 s)
  67422968
    ✓ should receive data and update the state (28 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |   91.67 |      100 |      75 |   90.91 |                   
 index.tsx |   91.67 |      100 |      75 |   90.91 | 15                
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed,1 total
Tests:       1 passed,1 total
Snapshots:   0 total
Time:        7.902 s,estimated 8 s

包版本：

"enzyme": "^3.11.0","enzyme-adapter-react-16": "^1.15.5","react": "^16.14.0","react-dom": "^16.14.0","pubsub-js": "^1.9.3"