Instant Noodles ·

React components and hooks used to run microwave test suites.

Installation

$ npm install instant-noodles

Usage

The instant-noodles package supplies a React component that can be used to create a live testing environment where tests are run each time the vite server experiences a hot reload or the page is refreshed.

import * as React from "react"
import * as ReactDOM from "react-dom"
import { InstantNoodles } from "instant-noodles"
import App from "./components/App/App"
import "./globals.css"

import { testApp } from "./tests/feature-000-app.test"
import { testNavbar } from "./tests/feature-001-navbar.test"
import { testHome } from "./tests/feature-002-home.test"
import { testAddTransaction } from "./tests/feature-003-add-transaction.test"
import { testBankActivity } from "./tests/feature-004-bank-activity.test"
import { testTransactionDetail } from "./tests/feature-005-transaction-detail.test"

const tests = {
  app: testApp,
  navbar: testNavbar,
  home: testHome,
  addTransaction: testAddTransaction,
  bankActivity: testBankActivity,
  transactionDetail: testTransactionDetail,
}

ReactDOM.render(
  <React.StrictMode>
    <App />
    {/* Include this component for a live test environment */}
    <InstantNoodles RootComponent={App} tests={tests} />
  </React.StrictMode>,
  document.getElementById("root")
)

Also, a configureSpecSuite method is provided for access to test methods that are coupled to the root component:

import * as React from "react"
import * as sinon from "sinon"
import { configureSpecSuite } from "instant-noodles"
import { defaultUserProfile } from "../data/constants"

export function testFeed(App) {
  const { assert, suite, render, fireEvent, customQueries, bootstrapTestSuiteContext } = configureSpecSuite(App)

  const FeatureTestSuite = suite("FEATURE 001: Tweets are rendered correctly in the `Feed` component")

  FeatureTestSuite.before((ctx) => {
    bootstrapTestSuiteContext(ctx)
  })

  FeatureTestSuite.before.each((ctx) => {
    ctx.sandbox = sinon.createSandbox()
  })

  FeatureTestSuite.after.each((ctx) => {
    ctx.sandbox.restore()
  })

  FeatureTestSuite.test(
    "The App.jsx component passes the correct `userProfile` state variable to the `UserProfile` component as a prop",
    async (ctx) => {
      const { queryByText } = render(<App />)

      assert.ok(
        queryByText(`@${defaultUserProfile?.handle}`, { exact: true, selector: "p" }),
        `The \`UserProfile\` component should display the \`userProfile\` handle of ${defaultUserProfile?.handle} inside` +
          ` a \`p\` element. It was not found on the page.`
      )
    }
  )

  // ...other tests

  return FeatureTestSuite.run()
}

API

TODO: Coming soon!