score:0
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"
Source: stackoverflow.com
Related Query
- How to test React with hooks and PubSub-js with Jest Enzyme
- How to test React useEffect hooks with jasmine and enzyme
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- How to test functions in React with Jest and Enzyme
- How to test styles and media queries rendered by a React component with Jest and/or Enzyme
- How to test async handleSubmit(e) in react with jest and enzyme
- How to test a className with the Jest and React testing library
- How to mock React component methods with jest and enzyme
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- How to test snapshots with Jest and new React lazy 16.6 API
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How to test form submit with jest and enzyme in react?
- how can I test if useState hook has been called with jest and react testing library?
- How to test React Router params with Redux and enzyme
- How to test getDerivedStateFromProps with Jest and Enzyme
- Unit test method that calls clearInterval with Jest and Enzyme on React
- How to test redux state update with react testing library and jest
- How to test with jest and typescript with types a basic react function component
- How to test an onChange input event with enzyme and jest
- How to test a React component that has Router, Redux and two HOCs... with Jest and Enzyme?
- how to test OnSubmit in React using Jest and Enzyme
- Test an whole table React component cells with jest and Enzyme
- stub fetch unit test react with enzyme and jest
- How to mock React component events with jest and enzyme
- Test react components with jest and enzyme and css modules
- How to test a React component that update over time with Jest and Enzyme?
- How to Test a function with Jest and React
- Jest with React - How do you render an entire component and test it?
- How can I test if child React component was rendered based on a URL change using Jest and Enzyme
- How do I unit test amcharts using jest with react and typescript?
More Query from same tag
- "Object is possibly 'undefined'" in reactjs with typescript
- Create a grid with variable card heights using material-ui react
- Convert a React.element to a JSX string
- Read text file reactjs
- How to add a Website in a ReactJs responsive web app?
- How to fix "Expected to return a value in arrow function" with reactjs?
- React inlined SVG paths are not responding to css animations
- Array store the same value in React?
- Combine two arrays to filter a common result?
- Typescript: Redirect component 'to' prop type error
- Placing components on the right and around other items in React problem
- How to take variable from component and use it in another component or file React
- Cannot get window.location.origin in React return
- Not adding object key/value pair
- i am getting error Each child in a list should have a unique "key" prop
- How can I deal with a long className in React JSX?
- Combining all values in a Bacon stream into a single array
- Async function overwrites array state when it should update only one item
- Component cannot listen to react-router
- How to persist data in react component from re-render?
- Unable to delete item from an array in React
- How can I change the color of the clicked button in React JS?
- Import bootstrap CSS in React failed to compile
- React-Datetime; I'm using two in one component, how do I tell which is which?
- react useState not working with new Date() as initial value
- The table content is disappeared after sorting
- Test React/Redux component with Jest
- How can I create an alert during a function in React.js?
- Mapping multiple arrays in JSX
- React dom , getElementByID