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

Question

你好，我有一个简单的应用程序，它连接到一个主题，然后更新他的状态，在玩的时候似乎可以工作，但是我有一个问题，如何正确地为它编写一个测试 有一个库我用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 组件？

Answer 1

由于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"