Mock It 'til You Make It

Tech

Demo App

All the Ricks

The Rick and Morty API

Storybook Stories

0 - Without Client: Could not find "client" in the context or passed in as an option, pass an ApolloClient instance in via options

Using storiesOf Storybook API. In the latest version of Storybook (v5.2) there is a newer way to do this using Component Story Format (https://storybook.js.org/docs/formats/component-story-format/) which Storybook has stated is simpler and more portable.

1 - With Client: Now shows the results of the API query, some styling is missing because it exists on the higher level App

Apollo Client is included in Apollo Boost - it's a starter kit that configures your client for you with recommended settings. This can also be done manually.

ApolloProvider is similar to React's Context.Provider. It wraps your React app and places the client on the context, which allows you to access it from anywhere in your component tree. So we should place it on a higher level component.

So far...

storiesOf Storybook API

Component Story Format

ApolloClient (apollo-boost)

ApolloProvider (@apollo/react-hooks)

So far...

storiesOf Storybook API

Component Story Format

ApolloClient (apollo-boost)

ApolloProvider (@apollo/react-hooks)

Stories with Mocking

Hitting the API with a query for each story is expensive; also, if API is down, you can't run your stories at all

Use MockedProvider - allows stories to be run in isolation and provides consistent results on every run by removing the dependence on remote data

gql function parses your query string into a query document

Show query

Show request and results mocking

Add another character

Causes an error if you add (status) to query - could work around that by exporting and importing your queries, but that would still require you to update your results mocking

Same thing happens if you were to remove (type) from query

Stories with Auto Mocking

This is where we'll build our own custom client w/ custom options

First, export your schema: `apollo schema:download --endpoint=https://rickandmortyapi.com/graphql/ schema.json` or `npm run schema:download`

Use AutoMockedProvider

The apollo client we created allows for Server Side Rendering

By default, we get two items when mocking results of an array type

Right away, you might notice that the image is broken because http://localhost:6006/Hello%20World (using string type) is not a valid image address

Also, the number for total can be a negative integer, unless you're strictly enforcing with a third party library a positive value only (graphql doesn't do this out of the box)

And if you're running tests on dynamically generated data, you would get mismatches on things like numbers

So far...

MockedProvider (@apollo/react-testing)

gql (apollo-boost)

Apollo cli

printSchema & buildClientSchema (graphql)

So far...

MockedProvider (@apollo/react-testing)

gql (apollo-boost)

Apollo cli

printSchema & buildClientSchema (graphql)

So far...

makeExecutableSchema & addMockFunctionsToSchema (graphql-tools)

ApolloClient (apollo-client)

InMemoryCache (apollo-cache-inmemory)

SchemaLink (apollo-link-schema)

So far...

makeExecutableSchema & addMockFunctionsToSchema (graphql-tools)

ApolloClient (apollo-client)

InMemoryCache (apollo-cache-inmemory)

SchemaLink (apollo-link-schema)

Auto Mocking with Local Resolvers

Auto Mocking with Merged Resolvers

So far...

MockList (graphql-tools)

faker.js

mergeResolvers function

So far...

MockList (graphql-tools)

faker.js

mergeResolvers function

Stories with Auto Mocked States

So far...

Observable & ApolloLink (apollo-link)

Mocking with Local State

Mock It 'til You Make It

References

Chang Wang – Mocking and automocking for tests and storybooks (OKG!, 2019) A new approach to mocking GraphQL data (Sashko Stubailo, 2018) Mocking and Testing GraphQL in React (Leigh Halliday, 2019) Testing GraphQL with Auto Mocked Provider (Leigh Halliday, 2019) GraphQL Mocking Techniques with Apollo Server (Moon Highway, 2019)

Licensing

Mock It Till You Make It Slides by Gabriela Dombrowski is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License You can find the original content https://gabidombrowski.github.io/mockit/#/