Testing CRA with Moralis React

Moralis General
#1

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?

image
image1763×126 61.1 KB

#2

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
#3 
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

#4

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?

#6

The error I do mention is

image
image1726×133 62.6 KB

Sorry for unclear question :pray:

#7

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

Is that error breaking the app?

#8

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>
    );
#9

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

#10

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

#11

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

#12

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

image
image1452×155 27.1 KB

#13

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

#14

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

#15

@alex Here is the repository to replicate issue.

#16

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.

#17

Yes @alex, 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;
#18

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]);
#19

@alex still the same :cry: