Test Driven Development with React

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • axios

    Promise based HTTP client for the browser and node.js

    Lets use axios for http calls.

  • Randomuser.me-Node

    Source code that powers randomuser.me

    // RandomUser.spec.js // lets import these two functions import { setupServer } from "msw/node"; import { rest } from "msw"; it('displays title, first and lastname of loaded user from randomuser.me', async () => { // here we will create a server const server = setupServer( // and this server is going to be processing the GET requests rest.get("https://randomuser.me/api", (req, res, ctx) => { // and here is the response it is returning back return res(ctx.status(200), ctx.json({ results: [ { name: { title: 'Miss', first: 'Jennifer', last: 'Alvarez' } } ] })); }) ); // then.. server.listen(); // so at this step we have a server // after this part we don't need to deal with axios or fetch // in this test function render(); const loadButton = screen.queryByRole('button', { name: 'Load Random User' }); userEvent.click(loadButton); const userInfo = await screen.findByText("Miss Jennifer Alvarez"); expect(userInfo).toBeInTheDocument(); });

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • jest

    Delightful JavaScript Testing.

    Create react app is creating the project having necessary dependencies for the testing. We are using jest* as the test runner which also has the assertion and mocking functionalities.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts