@vtex/test-tools

VTEX Test Tools

Add tests to your VTEX IO app in an instant 🚀

Install

$ yarn add @vtex/test-tools apollo-client -D

Usage

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

  "test": "vtex-test-tools test"

Add these lines to your .vtexignore:

react/**/__tests__/**
react/**/__mocks__/**
react/**/*.test.js
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 react-testing-library under the hood, so most of its API it's the same: read the docs.

There are few new features added to it:

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:

  "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 MockProvider.

You can pass props to it using the graphql option. Example:

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

test('should render mock graphql responses', async () => {
  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 new Promise(resolve => setTimeout(resolve, 0))

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

Examples

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

Testing a React component

TypeScript

Testing a component using CSS Modules

Testing a component using GraphQL

Testing a component using React Hooks

Testing a component translating in another locale

License

MIT © VTEX

Changelog

[0.1.3] - 2019-03-15

Added

• Use en.json as default translation.