DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
ynwd
ynwd

Posted on

UseEffect React Testing

This is a modification of the App.tsx and App.test.tsx CRAs. It uses useEffect to get the text from the Golang API.

.
β”œβ”€β”€ cloudbuild.yaml
β”œβ”€β”€ cmd
β”‚   β”œβ”€β”€ build
β”‚   β”‚   β”œβ”€β”€ index.gohtml
β”‚   β”‚   └── main.go
β”‚   └── main.go
β”œβ”€β”€ firebase.json
β”œβ”€β”€ go.mod
β”œβ”€β”€ internal
β”‚   β”œβ”€β”€ app.go
β”‚   └── app_test.go
β”œβ”€β”€ package.json
β”œβ”€β”€ serverless.go
└── web
    └── home
        β”œβ”€β”€ craco.config.js
        β”œβ”€β”€ package.json
        β”œβ”€β”€ public
        β”œβ”€β”€ src
        β”‚   β”œβ”€β”€ App.css
        β”‚   β”œβ”€β”€ App.test.tsx
        β”‚   β”œβ”€β”€ App.tsx
        β”‚   β”œβ”€β”€ index.css
        β”‚   β”œβ”€β”€ index.tsx
        β”‚   β”œβ”€β”€ logo.svg
        β”‚   β”œβ”€β”€ react-app-env.d.ts
        β”‚   β”œβ”€β”€ reportWebVitals.ts
        β”‚   └── setupTests.ts
        β”œβ”€β”€ tailwind.config.js
        └── tsconfig.json
Enter fullscreen mode Exit fullscreen mode

Backend

Golang API

package internal

import (
    "context"

    "github.com/fastrodev/fastrex"
)

func Handler(req fastrex.Request, res fastrex.Response) {
    res.Send("The best interface is no interface")
}

func CreateApp() fastrex.App {
    ctx := context.Background()
    app := fastrex.New()
    app.Ctx(ctx)
    app.Get("/api", Handler)
    return app
}


Enter fullscreen mode Exit fullscreen mode

Entry point

package serverless

import (
    "net/http"

    "github.com/ynwd/mnrp/internal"
)

func Main(w http.ResponseWriter, r *http.Request) {
    internal.CreateApp().Serverless(true).ServeHTTP(w, r)
}

Enter fullscreen mode Exit fullscreen mode

Frontend

App.tsx

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [value, setValue] = useState("");
  useEffect(() => {
    async function getText() {
      let response = await fetch('/api')
      const d = await response.text()
      setValue(d)
    }
    getText()
  }, [value]);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h3>
          {value}
        </h3>
      </header>
    </div>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

App.test.tsx

import React from 'react';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { render, screen } from '@testing-library/react';
import App from './App';

const server = setupServer(
  rest.get('/api', async (req, res, ctx) => {
    return res(ctx.text("The best interface is no interface"));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('loads and displays greeting', async () => {
  render(<App />);
  const linkElement = await screen.findByText('The best interface is no interface');
  screen.debug()
  expect(linkElement).toBeInTheDocument();
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: