Jest unit tests for react fails with the same error: Method “example” is meant to be run on 1 node. 0 found instead

See also questions close to this topic

• Updating React state in nested setTimeout callbacks

  Can someone please tell me what's wrong with this and why the state of the 'video variable' remains false? So, even after the h2 element has rendered and is visible (i.e. the state of the video variable has been updated to true), when I click and call the hideVideo function, the video state remains false? Many thanks.

  export default function App() {
    const [message, showMessage] = useState(false);
    const [video, setVideo] = useState(false);
    
  let modalTimeout, videoTimeout;
  
    useEffect(() => {
     
      window.addEventListener("click", hideVideo);
      setupTimeouts();
      return () => {
        clearTimeout(modalTimeout);
        clearTimeout(videoTimeout);
      };
    }, []);
  
    const setupTimeouts = () => {
      modalTimeout = setTimeout(() => {
        showMessage(true);
  
        videoTimeout = setTimeout(() => {
         
          showMessage(false);
          setVideo(true);
        }, 4000);
      }, 2000);
    };
  
    const hideVideo = () => {
      console.log(video);
      showMessage(false);
      if (video === true) {
        setVideo(false);
        
      }
    };
  
    return (
      <div className="App">
        {message && <h1>Message</h1>}
        {video && <h2>Video</h2>}
      </div>
    );
  }
  
• React-dnd multiple elements

  I can make react-dnd drag easily having a single element to drag over however I have array of 4 fields I'd like to make draggable. In my example code down below it creates four boxes from mapping the array and each box has a className of 'element'. Which should make them all draggable however they won't move.

  Here is my drag code:

   const ELEMENT = 'element';
      const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
        type: ELEMENT,
        collect: (monitor) => ({
          isDragging: monitor.isDragging()
        })
      }))
  

  Here is my draggable element:

   {FieldDetail.map((e,i) =>  
     <div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
          <div className='element' ref={drag}></div>            
      </div>          
    )} 
  

  Any ideas? Do I need to do something more within the type or className?
• One connection - multiple channels

  I have 2 watchers, each one creates a socket connection. How to make one connection?

  There is a solution to move the connection to the socket into a variable and pass it to Watchers? There is a comment in the code where the socket is connected.

  Channels in watchers

  export function* watchOnSocketBinanceRT() {
    while (true) {
      const { socketToken } = yield take(types.BINANCE_SOCKET_OPEN);
      const socket = yield call(socketConnectionBinance, socketToken); // Creates a new connection
      const channel = yield call(socketChannelBinanceRT, socket);
  
      if (socket.onopen) {
        yield put({ type: types.BINANCE_SOCKET_CONNECTED });
      }
  
      yield fork(socketSendBinance, socket);
      yield fork(socketCloseBinance, socket);
  
      const { cancel } = yield race({
        task: call(socketOnmessageBinance, channel),
        cancel: take(types.BINANCE_SOCKET_CLOSED),
      });
  
      if (cancel) {
        buffersRT.flush();
        channel.close();
      }
    }
  }
  
  export function* watchOnSocketBinance() {
    while (true) {
      const { socketToken } = yield take(types.BINANCE_SOCKET_OPEN);
      const socket = yield call(socketConnectionBinance, socketToken); // Creates a new connection
      const channel = yield call(socketChannelBinance, socket);
  
      if (socket.onopen) {
        yield put({ type: types.BINANCE_SOCKET_CONNECTED });
      }
  
      yield fork(socketSendBinance, socket);
      yield fork(socketCloseBinance, socket);
  
      const { cancel } = yield race({
        task: call(socketOnmessageBinance, channel),
        cancel: take(types.BINANCE_SOCKET_CLOSED),
      });
  
      if (cancel) {
        channel.close();
      }
    }
  }
  

  Socket connection

  const socketConnectionBinance = socketToken => {
    return new Promise((resolve, reject) => {
      let socket;
      if (socketToken) {
        socket = new WebSocket(`${wsUrlBinance()}/${socketToken}`);
      } else {
        socket = new WebSocket(`${wsUrlBinance()}`);
      }
  
      socket.onopen = function () {
        resolve(socket);
        console.log('Binance connection opened');
      };
      socket.onerror = function (event) {
        reject(event);
        console.log('Binance socket error: ', event);
      };
      socket.onclose = function (event) {
        if (event.wasClean) {
          console.log('Binance connection closed');
        }
      };
    });
  };
  

  Thanks for the help!
• AngularJS Jasmine unit test for classList add

  Trying to write a unit test for a ng-click that adds a CSS class (color change) when the user clicks on the Markers anchor tag. What I have is NOT working, and I have an error... TypeError: Cannot read property 'classList' of null. Using Jasmine and AngularJS. Any help advise is appreciated.

  HTML...

  <div class="panel">
      <ul class="inline-block">
          <li class='subtab'>
              <a id="markersSubtab" ng-click="subtabClick('Markers')">Markers</a>
          </li>
          <li class='subtab'>
              <a id="queryImpactSubtab" ng-click="subtabClick('Query Impact')">Query Impact</a>
          </li>
      </ul>
  </div>
  <div class="tabpanel-content">
      <div ng-show="!queryImpactSelected">
          <cdi-directive></cdi-directive>
      </div>
      <div ng-show="queryImpactSelected">
          <query-impact-control></query-impact-control>
      </div>
  </div>
  

  Controller.js...

  define(function (require) {
  var cdiSummaryTabModule = require("../CDIModule");
  
  cdiSummaryTabModule.controller('CDISummaryTabController', CDISummaryTabController);
  CDISummaryTabController.$inject = ['$scope', '$rootScope', 'QueryImpactService'];
  
      function CDISummaryTabController($scope, $rootScope, QueryImpactService)
      {
          $scope.queryImpactSelected = false;
          $scope.subtabClick = subtabClick;
  
          initialize();
  
          function initialize() {
              subtabClick('Markers');
          }
  
          function subtabClick(tabName) {
              if (tabName == 'Query Impact') {
                  $scope.queryImpactSelected = true;
                  document.querySelector('#markersSubtab').classList.remove('subtabSelected');
                  document.querySelector('#queryImpactSubtab').classList.add('subtabSelected');           
              }
              if (tabName == 'Markers') {
                  $scope.queryImpactSelected = false;
                  document.querySelector('#queryImpactSubtab').classList.remove('subtabSelected');
                  document.querySelector('#markersSubtab').classList.add('subtabSelected');              
              }        
          }
  
  
      };
  });
  

  ControllerTests.js...

  it('Should add subtabSelected class on click of Markers', function () {
  
              var clicked = 'Markers';
              var myElement = angular.element(document.querySelector('#markersSubtab'));
              myElement .add();
              var myDiv= '<div id="markersSubtab" class="subtabSelected"></div>';
              var elementOne= angular.element(myDiv);
              var compiledElement= $compile(elementOne)(scope);
              angular.element(document).find('body').append(elementOne);
  
              scope.$digest();
              scope.subtabClick(clicked);          
  
              expect(compiledElement.hasClass('subtabSelected')).toEqual(true);
  
          });
  
• Mocking single function in class is still running that function - Phpunit 8.2

  I am trying to mock a function that is called inside one of my tests. It checks config and makes a call out but for unit tests we dont set the config values or allow calls out of our code.

  Class with Function that needs to be mocked

   class MyClass {
      public __constructor($a, $b){
        //some code
      }
      public function functionA($a){
        //some code
        $this->functionThatNeedsMock($value);
      }
      public function functionThatNeedsMock($b){
        //throws error if config is missing or if it can't reach the external website
        return $aString;
      }
   }
  

  Unit test:

      $stub = $this->createMock(MyClass::class);
      $stub->method('functionThatNeedsMock')->willReturn('abc');
  
      $uri = 'uri/here';
      $response = $this->asWebUser($user, new WebEndpointConfigure())->postJson($uri, ["message" => "foo"]);
  
      $this->assertResponseOk($response);
  

  I want to just bypass the whole function and whenever that function gets called in the test i want it to just use the mock that returns a string without actually running that function.

  We are behind in phpunit using 8.2
• how properly mock/test constructor with Jest

  I'd like to test Module2 constructor as well as other its functions. What is the proper way to mock Module2 constructor without breaking testFunc1, testFunc2 to test with Jest.

  // ****************************************
  // Module 1 component
  class Module1 {
    init() {
      // ........
    }
  }
  
  module.exports = new Module1()
  
  
  // ****************************************
  // Module 2 component
  const module1 = require('./module1')
  
  class Module2 {
    constructor() {
      try {
        module1.init()
      } catch (err) {
        console.log('error')
        process.exit(1)
      }
    }
  
    testfunc1 = () => {
      // ........
    }
  
    testfunc2 = () => {
      // ........
    }
  }
  
  module.exports = new Module2()
  
• Should you access redux store in HOC component?

  I'm working on one of my first React Native apps and I wanted to add loading HOC component which displays loading indicator on top of current screen whenever I'm waiting on server response. Loading status is stored in redux store and I update it respectively on each request (just before sending request changing to true and after request to false ).

  here's what i got:

  export const LoadingScreen = (WrappedScreen : React.ComponentType<any>) => {
     const LoadingWrapper = (props: any) => {
        const isLoading = useAppSelector(state => state.user.pendingLoggin)
        return (
           <>
              <WrappedScreen {...props}/>
              {isLoading && <View style={styles.loading}>
                 <ActivityIndicator size='large' />
              </View>}
           </>
        )
     }
     return LoadingWrapper
  }
  

  This solution works fine but I have a question, can accessing store in such a component affect performance (rerendering whole wrapped component)?
  Is there any better solution for such a case?
• ReactJS ProtectedRoute redirects. Variable rendered twice, false on the first time yet its true in the redux-store

  Am trying to implement the ProtectedRoute. But when i pass authentication, meaning am authenticated rightly from the auth API, get my token, i get pushed to the main page without a problem. However, when i type in the browser the URL manually to the protected route, i get redirected to the Login page.

  Am storing the isAuthenticated flag in a redux store using redux-toolkit. Check out my code below

  ProtectedRoute.jsx

  import React, { useState, useEffect } from 'react';
  import { Route, Redirect } from "react-router-dom";
  import { useSelector } from 'react-redux'
  
  const ProtectedRoute = ( { component: Component, ...rest }) => {
  
      const isLoggedIn = useSelector(state => state.auth.isAuthenticated);
      const [ isAuthed, setAuthed ] = useState(false);
  
      useEffect(() => {
          setAuthed(isLoggedIn);
      }, [isLoggedIn]);
  
  
      return (
          <Route 
              {...rest}
                 render={
                    props => (
                      isAuthed === true
                        ? <Component {...props} />
                        : <Redirect to={{ pathname: '/', state: { from: props.location} }}/>
                  )
              }
        />
    )
  }
  
  export default ProtectedRoute
  

  The composition of the App.js are as follows

        <Router>
              <Switch>
                  <Route exact path="/" component={SignIn} />
                  <ProtectedRoute exact path="/main" component={ Dashboard } />
                  <Route path="*">
                    <div>404 Not found</div>
                  </Route>
              </Switch>
          </Router>
  

  I tried passing this login as a prop from the App.js to the ProtectedRoute but still i cant get the result i want.

  What i realized though is that there's double rendering. On the first time, reading the isLoggedIn variable produces a false result and therefore forces a redirect.
• Objects are not valid as a React child (found: object with keys {name,age, img})

  Uncaught Error: Objects are not valid as a React child (found: an object with keys {name, age, img}). If you meant to render a collection of children, use an array instead..

  How to resolve this error

  data.js

  export const student = [
      {
        id: 1,
        img:
          "https://i.picsum.photos/id/1025/200/300.jpg?hmac=IOMIDjfOXbZ-vD59diaXLcQcq5g6Xo3Zg_gRF9UmwL0",
        name: "john",
        age: 30,
        link: "/john",
      },
      {
        id: 2,
        img:
          "https://i.picsum.photos/id/945/200/200.jpg?hmac=_7D53GpdtYZnR2d9KUdpkiRzfoDmIumI1MP65WM2l-w",
        name: "doe",
        age:23,
        link: "/doe",
      },
    ];
  

  student.js

  import { student } from "./data.js";
  import { find } from "./action.js";
  
  export class Student extends Component {
    render() {
      const { find } = this.props;
      return (
        <div>
          {student.map((item, index) => {
            return (
              <div key={index}>
                <img src={item.img} aly={item.name} />
                <h2>{item.name}</h2>
                <h2>{item.age}</h2>
                <Link to={item.link}>
                  <button onClick={() => find(item)}>Find</button>
                </Link>
              </div>
            );
          })}
        </div>
      );
    }
  }
  
  export default connect(null, { find })(Student);
  
         
  

  action.js

  export const find = (item) => (dispatch) => {
      const { name, age, img } = item;
      const element = { student_name: name, student_age: age, student_img: img };
      dispatch({
        type: actionTypes.SELECTED_VALUE,
        payload: element,
      });
    };
  
• Error when testing a React search component

  Hi I´m getting this TypeError when testing my component, I don't know why the history is undefined

  TypeError: Cannot read property 'push' of undefined
  
        16 |     e.preventDefault();
        17 |     setSearchTerm(inputValue);
      > 18 |     history.push(`/search/${inputValue}`);
  

  here is my component:

    const handleSubmit = (e) => {
  e.preventDefault();
  setSearchTerm(inputValue);
  history.push(`/search/${inputValue}`);
  

  and my test

    it("Calls the handleSubmit function", () => {
  const handleSubmit = jest.fn();
  fireEvent.submit(screen.getByRole("textbox"));
  expect(handleSubmit).toHaveBeenCalled();
  
• How do I create a test for my services controller (Jest)?

  I'm trying to create a test for my Animals List Services Controller, making sure the database query is tested. Right now with what I have, I have been able to mock the database query call to ensure the query is being called with the right parameters. However, i'm also trying to mock the return values from the database query call. I'm not sure how to mock dbResult in "services.ts" to get the rows property. Please I need some help, not sure how to do it. Thank you in advance.

  I believe I was able to mock the database query call, however, is there a way to refactor or create a test to mock the return call of dbResult?

  services.ts

  import db from '../../modules/db';
  import { DBGenericDataResponse } from '../../types/models';
  
  export async function GetAnimalsList(): Promise<DBGenericDataResponse> {
      const lQuery = `select animalid, description from animal where active=1 order by sortorder, description`;
      const responseMessage: DBGenericDataResponse = {
          code: 200,
          status: 'ok',
          message: '',
          count: 0,
          data: [],
          error: ''
      };
      try {
          const dbResult = await db.query<any>(lQuery);
          responseMessage.message = 'Animals Returned';
          responseMessage.count = dbResult.rows.length;
          responseMessage.data = dbResult.rows;
      } catch (err) {
          responseMessage.code = 400;
          responseMessage.status = 'error';
          responseMessage.message = 'Error retrieving Animals List';
          responseMessage.error  = err;
      }
      return responseMessage;
  }
  

  ServicesTest.spec.ts

  import * as Services from '../../../../src/controllers/animals/services';
  import db from '../../../../src/modules/db';
  
  
  describe('GetAnimalsList', () => {
     afterEach(() => {
        jest.resetAllMocks();
     });
  
     it('should call the database with the correct query parameter', async () => {
        const dbMock = jest.spyOn(db, 'query');
  
        const response = await Services.GetAnimalsList();
  
        expect(dbMock).toBeCalled();
        expect(dbMock).toHaveBeenCalledWith(
           'select animalid, description from animal where active=1 order by sortorder, description'
        );
     });
  });
  
• React unit test: access methods and state props inside functional components with Jest Enzyme

  I am trying to learn writing unit tests using jest, enzyme for functional based React components. I am trying to write unit tests for the methods defined inside functional components. Please can anyone help me with this?

  Mycomponent:

  const MyTable = ({allRows}) => {
      const [page, setPage] = useState(0);
      const [val, setVal] = useState(0);
  
      const handleClick = (index) => {
              setPage(index); 
              //other logic
      };
  
      const handleFilter = (event) => {
          setVal(0);
          //other logic
      }
  
      return (
          <div className={classes.root}>
              <Paper className={classes.paper}>
                  <TableContainer>
                      <Table>
                          <TableBody>
                              
                                          <TableRow 
                                          onClick={(event) => handleClick(event, row, index)}
                                          >
                                              <TableCell> </TableCell>
                                          </TableRow>  
                          </TableBody>
                      </Table>
                  </TableContainer>
              </Paper>
          </div>
      );
  }
  
  export default MyTable;
  

  setUpTest.js

  // jest-dom adds custom jest matchers for asserting on DOM nodes.
  // allows you to do things like:
  // expect(element).toHaveTextContent(/react/i)
  // learn more: https://github.com/testing-library/jest-dom
  import '@testing-library/jest-dom';
  import {configure} from 'enzyme';
  import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
  
  configure({adapter: new Adapter()});
  

  MyTable.test.js

  describe('<MyTable />', () => {
      let wrapper;
      let mockData = [{ id: 'id1' }, { id: 'id2' }]
  
      beforeAll(() => {
          wrapper = shallow(
              <MyTable
                  allRows={mockData} 
              />);
      });
  
      it('handleClick Test', () => {
         const spy = jest.spyOn(wrapper.instance(), "handleClick");
      });
  })
  

  ERROR: TypeError: Cannot read property 'handleClick' of null

  I also tried to console.log(wrapper.instance()) but it is returning null I also tried to access state props but it says ShallowWrapper::state() can only be called on class components

  Any help is appreciated
• Unhandled error: ,Script error for "enzyme"

  I am trying to set up enzyme for React Testing and during the set up it fails with the following error.

  Error: Unhandled error: script error for enzyme. Error: Unhandled error: ,Script error for "react", needed by: test/js/steps/test.tsx

  Setup: App: MyProj Enzyme: https://github.com/jonmbake/enzyme-umd from this built enzyme-react.js & enzyme-react.min.js (was looking for UMD module) Test Framework: Cucumberjs

  test.tsx

  import * as React from "react";
  import { shallow } from 'enzyme';
  import App from "reactui/App";
  import { Base } from "reactui/Base";
  import chai = require('js/chai');
  import control = require('test/js/Control');
  
  var expect = chai.expect;
  
  function supWrapper() {
  
    Given(/^App is running$/, function () {
  
      const wrapper = shallow(<App ag={control.getAg()} />)
      var agvalue = expect(wrapper.find(Base).prop('ag').props.checked).to.be.not.null;
      return (agvalue);
    });
  }
  export = supWrapper;
  

  Where am I going wrong?? Any help appreciated
• ReactWrapper::state() can only be called on class components

  I recently converted my class component to a functional component using React Hooks and now some of my tests are failing. The error I get is:

  ReactWrapper::state() can only be called on class components
  

  and I think it's because in my test I use .state. Is there an alternative to this so my tests will pass now that I no longer have a class component?

  it('sets field state isInputActive to true onFocus', () => {
      const component = mount(<PinInput pin="123" onChange={() => {}} />);
  
      expect(component.childAt(0).state('isInputActive')).toEqual(false);
      component.find('.parental-pin__input-entry').simulate('click');
      expect(component.childAt(0).state('isInputActive')).toEqual(true);
    });