Easy to use relay mock and unit testing tool (works with Jest & Enzyme)
npm install relay-testing-utils
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.
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)
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} />)
);
});
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')
})
You will find more detail and working examples in the example
folder.
Run the command npm test
to execute them.
.relayMock(relay)
=> returns a Relay mock implementation
.relayWrap(<YourContainer />, [{OPTIONS}])
=> wraps your container with relay mock environment and passes this.props.relay
- auto generating fixture data based on schema