score:3
Accepted answer
i solved my problem by wrapping everything on my test with act
. i believe that this error was happening because part of the test was wrapped in act
, but the async part wasn't, so the change was happening outside the scope of this function.
here is the updated test, that is passing:
import react from 'react';
import themehandler from './theme-handler';
import { mockedprovider, wait } from '@apollo/react-testing';
import { getbrandthemedocument } from '../../generated/graphql';
import { button } from '@material-ui/core';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
describe('theme handler', () => {
const originalenv = process.env;
beforeeach(() => {
// https://stackoverflow.com/questions/48033841/test-process-env-with-jest/48042799
jest.resetmodules();
process.env = { ...originalenv };
delete process.env.react_app_brand;
});
aftereach(() => {
process.env = originalenv;
});
it('should use a theme retrieved from the backend', async () => {
process.env.react_app_brand = '39';
await act(async () => {
const mocks = [
{
request: {
query: getbrandthemedocument,
variables: { brandid: 39 },
},
result: {
data: {
brandtheme: {
brandthemecolor: [
{ key: 'primarycolor', value: '#182335' },
{ key: 'darkprimarycolor', value: '#161f2f' },
],
},
},
},
},
];
const wrapper = mount(
<mockedprovider mocks={mocks} addtypename={false}>
<themehandler>
<button color='primary' id='test-obj'>
hello world!
</button>
</themehandler>
</mockedprovider>
);
expect(wrapper).tobetruthy();
await wait(0);
wrapper.update();
expect(wrapper.find('#test-obj')).tobetruthy();
});
});
});
Source: stackoverflow.com
Related Query
- Unit testing Apollo Graphql in React using Hooks
- Unit Testing Custom React Hooks in TypeScript using Jest and @testing-library/react-hooks
- Testing React Functional Component with Hooks using Jest
- Testing React components that fetches data using Hooks
- How to mock ResizeObserver to work in unit tests using react testing library
- Mocha, Enzyme: Unit testing custom functions in react component using enzyme
- Unit testing react component that makes ajax calls using JEST
- D3js in a React Component Unit Testing using Jest/Enzyme
- Unit testing react using Karma and Jasmine
- Unit testing React component using Material UI Dialog
- Unit test form submission with data using react testing library
- Apollo graphql mutation polling with react hooks
- How to Unit test the rendering of a child component in the parent component using react testing library?
- Add API Key to graphql request using Apollo Client and React
- React form using Apollo & GraphQL does not trigger onSubmit
- Dynamic filter operator in GraphQL using Apollo (in a React app)
- How to unit test a React functional component using hooks useEffect,useDispatch and useSelector and Redux?
- Empty cache after server side rendering a request in isomorphic app using Apollo GraphQL and React
- Testing window.location.href in React unit tests using Mocha, Karma
- Testing a react component using custom hooks with crud operations functions
- React using graphQL apollo refetch will also update other components
- How to set graphql data using react hooks in typescript?
- Unit testing of exported function using react / enzyme
- React Apollo GraphQL named mutation options.update not getting called while using optimisticUI
- How to refer to conditional elements when unit testing React components using jest and enzyme
- How to unit test react hooks component that fetches data in useEffect using Enzyme?
- Using graphql fragments in apollo react client
- Unit Testing in React JS using Jest
- unit testing using enzyme: Pass react props as event to wrapper
- Unable to test HOC containing hooks using React testing library
More Query from same tag
- React HOC to conditionally render a component
- res.sendFile() shows my html, but doesn't render react components
- Map letters from array if the condition is met REACT
- In ReactJS, using array index as key is said to not work well, but I can't make it not work well?
- Can I use reactJS library in react-native?
- svg interfering with the button
- How to access state in a functional components in ReactJS?
- How to parse multiple parameters to a stateless component?
- How can i send my array to other component in react?
- How do you add multiple elements to Material-UI's AppBar component?
- React controlled contenteditable
- react-transition-group card flip animation
- React ● I want to convert a react-component to a JPG or PNG
- React and Redux architecture issues
- React/Redux : Getting property undefined of initial state
- React leaflet map center not changing
- The confusion the way setState works in this code
- How to bind action creator to component in redux thunk
- Get dataset of parent, while clicking on child
- Can I force a state update using a class as a value?
- Why the auto binded props yields a warning message at run-time by propTypes?
- Use GET to return records based on nested fields
- react-speech-recognition for multiple fields
- Is the ordering of props in JSX important?
- Unable to send POST request from the React frontend to Django Rest Framework using serializer?
- React - How to get the button element I clicked?
- CORS issue: Next.js application
- Saving parts of URL information for reuse in React
- JSON.parse( localStorage.getItem('priceSlider')).start , Unexpected end of JSON input
- How to change color of a table row based on object property value?