VTEX Test Tools
Add tests to your VTEX IO app in an instant 🚀
Table of Contents
Install
yarn add -D @vtex/test-tools @apollo/react-testing react-intl@3
Usage
Add a new script to your react/package.json
:
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'
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
const renderHook act = hooks
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:
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'
GraphQL
We automatically wrap your component with an Apollo's MockedProvider
.
You can pass your mocked queries to it using the graphql
option. Example:
Examples
These are some common use cases that might be helpful to see how it's done:
Debugging tests in VS Code
Testing a React component
Testing a React Hook
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