Testing CRA with Moralis React

Hello Moralis Community

I am trying to test react application and react moralis using testing-library.The problem is the react components wrapped inside MoralisProvider of react-moralis interacting with moralis database.
Could anyone please help?

Can we see your code and how you’re importing and using Moralis / react-moralis? What command did you run to get to that error?

These are the instructions on using react-moralis: Connect with React - Moralis

1 Like
import { render, screen } from "@testing-library/react";
import CreateAuction from "pages/assets/single/CreateAuction"; 
import { MoralisProvider } from "react-moralis";
import { createMemoryHistory } from "history";
import { BrowserRouter as Router } from "react-router-dom";
 
window.matchMedia =
  window.matchMedia ||
  function () {
    return {
      addListener: jest.fn(),
      removeListener: jest.fn(),
    };
  };
// const Moralis = require('moralis/node')
describe("Creatin Auction", () => {
  test("should show auction form", async () => {
    const history = createMemoryHistory();
    const route = "/collection/alphabet/asset/yCog7AaY2IMQCFVtBRmYSBp6/auction/createEdit";

    render(
      <MoralisProvider
        appId={process.env.REACT_APP_MORALIS_APP}
        serverUrl={process.env.REACT_APP_MORALIS_SERVER}
      >
        <Router location={history.location} navigator={history}>
          <CreateAuction />
        </Router>
      </MoralisProvider>
    );
    expect(screen.getByText(/auction/i)).toBeInTheDocument();
  });
});

I run npm run test

No window.ethereum found warning will show if there is no crypto wallet extension installed in the browser.

is that the error you are referring to?

The error I do mention is


Sorry for unclear question :pray:

Did you import the moralis sdk with the cdn scripts or did you install the moralis npm packages?

Is that error breaking the app?

Yes already installed, it doesn’t work only when I run test.

import { MoralisProvider } from "react-moralis";

 render(
      <MoralisProvider
        appId={process.env.REACT_APP_MORALIS_APP}
        serverUrl={process.env.REACT_APP_MORALIS_SERVER}
      >
        <Router location={history.location} navigator={history}>
          <CreateAuction />
        </Router>
      </MoralisProvider>
    );

did you try adding require('parse/node') in your js file, to see if that changes the anything in the test

also try adding require('moralis/node') if parse do not work

Thanks @johnversus, I will try and let you know once it is done.

@johnversus The issue is the still same shown in the attached image .

ohh…This solution seems to have worked for some users. Not sure if there is any other fix.

Are you able to share a repo of your project so the issue can be replicated?

@glad Here is the repository to replicate issue.

The test is passing, I feel these warnings can be ignored. Seems to be an issue with Parse (which Moralis is based on) when used with these Jest tests.

Yes @glad, When I deal with database, Parse(based by Moralis) cause issue.I could not get any records from database even though there is.

import React from "react";

import { useMoralisQuery } from "react-moralis";

const Home = () => {    
    // Even though there is record related to bdJhoxg2dXAAbff6IBtx9JOH, no data is returned.
    const { data: collections } = useMoralisQuery("collection", (query) =>
        query.equalTo("objectId", "bdJhoxg2dXAAbff6IBtx9JOH")
    );
    console.log("collections: ", collections)
    return(<h3>Home Page</h3>);
}

export default Home;

Your code should be working. Make sure the Class name of collection is correct. Also it is case sensitive.

Also you should use a useEffect to log (in general).

 useEffect(() => {
    console.log('collections: ', collections);
}, [collections]);

@glad still the same :cry: