npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@itglobers_og/test-tools

v0.0.1

Published

VTEX IO testing tools

Downloads

618

Readme

VTEX Test Tools

Npm badge CI

Add tests to your VTEX IO app in an instant 🚀

Table of Contents

Install

yarn add -D @vtex/test-tools @apollo/react-testing@3 react-intl@3

Usage

Add a new script to your react/package.json:

{
  "name": "my-io-app",
  "scripts": {
    "test": "vtex-test-tools test"
  }
}

Add these lines to your .vtexignore:

react/**/__tests__/**
react/**/__mocks__/**
react/**/__snapshots__/**
react/**/*.test.js
react/**/*.test.ts
react/**/*.test.tsx

Run in your terminal:

yarn test

If you're using TypeScript there are a few more steps.

Done! 🎉

Under the hood, we use Jest, so you can pass Jest flags as parameters: read the docs.

API

react module

The module react makes it easy to test VTEX IO React apps.

Example

import React from 'react'
import { render } from '@vtex/test-tools/react'
import HelloWorld from './HelloWorld'

test('should render the Hello!', () => {
  const { getByText } = render(<HelloWorld />)

  const element = getByText(/Hello!/)

  expect(element).toBeDefined()
})

This module uses @testing-library/react (RTL) under the hood, so most of its API is the same (read their docs here).

We added a few more features to the regular render function from RTL, such as a graphql and locale option. You can see more about them down below.

React Hooks

You can also test your custom hooks.

Example

import { hooks } from '@vtex/test-tools/react'
import useCustomHook from './useCustomHook'

const { renderHook, act } = hooks

it('counter should be one', async () => {
  const { result } = renderHook(() => useCustomHook())

  // This waits for the useEffect hook to be triggered and mutate hook state
  await act(() => Promise.resolve())

  expect(result.current).toBe(1)
})

The module uses @react-testing-library/react-hooks under the hood, to understand the reactHook function you can read its doc

Messages

We will automatically wrap your component with an IntlProvider with your app's messages/en-US.json messages.

You can change the default locale being used adding a config to your package.json. Example:

{
  "name": "my-awesome-io-app",
  "vtexTestTools": {
    "defaultLocale": "pt-BR"
  }
}

If you want to change the locale just in a test, you may pass the locale option. Example:

import React from 'react'
import { render } from '@vtex/test-tools/react'
import HelloWorld from './HelloWorld'

test('should render the example translated to portuguese', () => {
  const { getByText } = render(<HelloWorld />, { locale: 'pt' })

  const element = getByText(/Olá!/)

  expect(element).toBeDefined()
})

GraphQL

We automatically wrap your component with an Apollo's MockedProvider.

You can pass your mocked queries to it using the graphql option. Example:

import React from 'react'
import { render, flushPromises } from '@vtex/test-tools/react'
import GraphqlComponent from './GraphqlComponent'
import GET_BOOKS from './getBooks.graphql'

test('should render mock graphql responses', async () => {
  jest.useFakeTimers()

  const bookMock = {
    request: {
      query: GET_BOOKS,
    },
    result: {
      data: {
        books: [
          {
            id: 10,
            title: 'Hello',
          },
        ],
      },
    },
  }

  const { getByText } = render(<GraphqlComponent />, {
    graphql: { mocks: [bookMock] },
  })

  expect(getByText(/Loading/)).toBeDefined()

  await flushPromises()
  jest.runAllTimers()

  expect(getByText(/Hello/)).toBeDefined()
})

End-to-end flows

We offer hooks to make writing end-to-end tests easier.

Extended commands:

  • clickById
  • getById
  • typeById

Custom methods:

  • goToSearchPage
  • goToProductPageByShelf
  • checkText
  • checkIfElementExists
  • openCart
  • closeCart
  • clearCart
  • fillAndCheckShippingSimulator
  • scrollToId

Example:

import { openCart } from "@vtex/test-tools/cypress"

describe('Searchbar', () => {
  before(() => {
    cy.intercept(/operationName=ProductsSuggestionsQuery/, {
      fixture: 'product-suggestions-query.json',
    }).as('searchSuggestionsLoad')
  })

  it('finds a very specific product using the search bar', () => {
    cy.visit('/')

    cy.getById('searchBarInput').eq(0).type('Product')

    cy.getById('searchSuggestionsItem').contains('Product').click()

    cy.clickById('addToCart')

    openCart()

    ...
  })
})

You can check more details of these hooks in the links below:

Examples

These are some common use cases that might be helpful to see how it's done:

License

MIT © VTEX