How to test React with hooks and PubSub-js with Jest Enzyme - reactjs

Question

hello I have a simple app that connects with a topic and then updating he's state, seems to be working when playing around, but I have a problem with how to properly write a test for it
There is a library I using 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?
})
})
I've tried some
spies, finding input and checking values, but nothing change... why?
How should I test this Function component?

Answer 1

Since the PubSub.publishSync() operation will trigger mySub event handler that updates the state of the component. Make sure you wrap the code that causes React state updates into act(), otherwise, you will get a warning:
Warning: An update to App inside a test was not wrapped in act(...).
E.g.
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');
});
});
test result:
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
package versions:
"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"