All Projects → meuschke → Relay Testing Utils

meuschke / Relay Testing Utils

Licence: mit
Easy to use relay mock and unit testing tool (works with Jest & Enzyme)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Relay Testing Utils

react-testing-talk
No description or website provided.
Stars: ✭ 12 (-7.69%)
Mutual labels:  enzyme, jest
Simple React App
Simple base app using react, react-router v4, hot-reload & sass.
Stars: ✭ 263 (+1923.08%)
Mutual labels:  jest, enzyme
personal-blog
✍️ 个人技术博客
Stars: ✭ 79 (+507.69%)
Mutual labels:  enzyme, jest
enzyme-v3-and-react-16
Example of how to setup React 16, Enzyme 3 and Jest 21
Stars: ✭ 21 (+61.54%)
Mutual labels:  enzyme, jest
Graphql Dataloader Boilerplate
Very simple boilerplate using GraphQL and DataLoader
Stars: ✭ 405 (+3015.38%)
Mutual labels:  relay, jest
testing-reactjs-examples
🧪 "What should we test in our React components" - presentation examples.
Stars: ✭ 23 (+76.92%)
Mutual labels:  enzyme, jest
react-boilerplate
Sets the ground up for CRA-like projects.
Stars: ✭ 23 (+76.92%)
Mutual labels:  enzyme, jest
coconat
🍥 StarterKit Builder for rocket-speed App creation on 🚀 React 17 + 📙 Redux 4 + 🚠 Router 5 + 📪 Webpack 5 + 🎳 Babel 7 + 📜 TypeScript 4 + 🚔 Linters 23 + 🔥 HMR 3
Stars: ✭ 95 (+630.77%)
Mutual labels:  enzyme, jest
Enzyme
JavaScript Testing utilities for React
Stars: ✭ 19,781 (+152061.54%)
Mutual labels:  jest, enzyme
Webpack React Boilerplate
Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
Stars: ✭ 358 (+2653.85%)
Mutual labels:  jest, enzyme
react-multi-context
Manage multiple React 16 contexts with a single component.
Stars: ✭ 19 (+46.15%)
Mutual labels:  enzyme, jest
React Generate Props
Generate default props based on your React component's PropTypes
Stars: ✭ 23 (+76.92%)
Mutual labels:  jest, enzyme
enzyme-extensions
🎩 Enzyme extensions to test shallowly rendered enzyme wrappers 🏄🏻
Stars: ✭ 30 (+130.77%)
Mutual labels:  enzyme, jest
parcelui
Parcel + Typescript + React/Preact + Router + CSS Modules + SASS + Jest + Api-Now + Github Actions CI
Stars: ✭ 32 (+146.15%)
Mutual labels:  enzyme, jest
react-unit-test-practice
No description or website provided.
Stars: ✭ 16 (+23.08%)
Mutual labels:  enzyme, jest
egghead-bookshelf
An example React application to accompany the "Add Internationalization (i18n) to a React app using React Intl" Egghead.io course
Stars: ✭ 28 (+115.38%)
Mutual labels:  enzyme, jest
react-jest-enzyme-example
A minimal configuration for testing React components with Jest and Enzyme.
Stars: ✭ 23 (+76.92%)
Mutual labels:  enzyme, jest
React-Redux-Enterprise
A React-Redux boilerplate for enterprise/large scaled web applications
Stars: ✭ 77 (+492.31%)
Mutual labels:  enzyme, jest
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (+2261.54%)
Mutual labels:  jest, enzyme
Youtube React
A Youtube clone built in React, Redux, Redux-saga
Stars: ✭ 421 (+3138.46%)
Mutual labels:  jest, enzyme

relay-testing-utils

Easy to use relay mock and unit testing tool (works with Jest & Enzyme)

Install

npm install relay-testing-utils

Getting started

In order to unit test your relay containers you need a tool that provides you mocking & testing functionality. I recommend to use Jest but you can use any kind of testing library.

Mocking Relay with Jest

With Jest you can define manual mocks in a __mocks__ directory. Please create __mocks__/react-relay.js in your project repository and add the following code.

import relayTestingUtils from 'relay-testing-utils'
const relay = jest.genMockFromModule('react-relay');


export default relayTestingUtils.relayMock(relay)

Test a Relay Container

Simple Query

If your container has a fragment like:

fragments: {
  benutzer: () => Relay.QL
    fragment on BenutzerType {
      id
      prename
      surname
  }

You can test it with the following code:

import relayTestingUtils from 'relay-testing-utils'
import { mount } from 'enzyme';
import Example from '../Example';

// relay graph
const fixtures = {
  benutzer: {
    id: "007",
    prename: "James",
    surname: 'Bond'
  }
};

test('Relay testing wrap', () => {
  const wrapper = mount(
    relayTestingUtils.relayWrap(<Example {...fixtures} />)
  );
});

Testing Mutation

You are able to spy a mutation and test the passed props that are expected.

test('Test mutation', () => {
  // use a spy / mock fn
  const spy = jest.fn();
  Relay.Store.mockCommitUpdate(spy)

  const container = mount(
      relayTestingUtils.relayWrap(<Mutation {...fixtures} />)
  );
  // test if the mutation was commited with the expected variables
  expect(spy.mock.calls[0][0].getVariables().text).toBe('abc')
})

Examples

You will find more detail and working examples in the example folder. Run the command npm test to execute them.

API

.relayMock(relay) => returns a Relay mock implementation

.relayWrap(<YourContainer />, [{OPTIONS}]) => wraps your container with relay mock environment and passes this.props.relay

Roadmap

  • auto generating fixture data based on schema
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].