Skip to content

Commit

Permalink
Implement Gatsby specific mocks and shims
Browse files Browse the repository at this point in the history
>> Shims

Like documented in Gatsby's official testing setup guide (1) there are
some configurations that are specific to Gatsby projects. One is the
global `___loader` function used by Gatsby which this is mocked in this
commit using Jest's `fn()` mocking function. The `___loader.js` file
is placed in a folder called `__shims__` within the base `test`
directory.

>> Mocks

With Webpack, there are many loaders available to load any kind of file
type (2), e.g. CSS or Sass/Less for styles and images/videos of many
types. Jest doesn't know how to handle these when these are imported
within source files that are normally processed by Webpack so it'll
throw errors during the import.
A Jest mock (3) is a dummy module that is used instead of the real
module inside tests. It is good when there are something that you can't
or don't want to test. Almost everything can be mocked and the examples
are assets rather than code. For stylesheets, there is a package called
`identity-obj-proxy` (4) which is also already configured for this
project. For all other assets a manual mock has been created in a new
`__mocks__` folder within the base `test` directory.
To configure Jest to use these mocks the matching regex for the files
have been added to the `moduleNameMapper` option.

References:
  (1) https://www.gatsbyjs.org/docs/unit-testing/#setting-up-your-environment
  (2) https://webpack.js.org/loaders
  (3) https://jestjs.io/docs/en/manual-mocks
  (4) https://www.npmjs.com/package/identity-obj-proxy

GH-39
  • Loading branch information
arcticicestudio committed Nov 24, 2018
1 parent 3693df0 commit 4ca1390
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 0 deletions.
18 changes: 18 additions & 0 deletions test/__mocks__/file.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
* Copyright (C) 2018-present Sven Greb <[email protected]>
*
* Project: Nord Docs
* Repository: https://github.com/arcticicestudio/nord-docs
* License: MIT
*/

/**
* @file A mock for various asset file imports like stylesheets, media objects like images/videos and fonts.
* @author Arctic Ice Studio <[email protected]>
* @author Sven Greb <[email protected]>
* @see https://jestjs.io/docs/en/manual-mocks
* @since 0.1.0
*/

module.exports = "test-file-mock-stub";
20 changes: 20 additions & 0 deletions test/__shims__/___loader.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
* Copyright (C) 2018-present Sven Greb <[email protected]>
*
* Project: Nord Docs
* Repository: https://github.com/arcticicestudio/nord-docs
* License: MIT
*/

/**
* A shim for a Gatsby specific `___loader` function used by Gatsby's internal APIs.
*
* @type {object}
* @see https://www.gatsbyjs.org/docs/unit-testing/#setting-up-your-environment
* @see since 0.1.0
*/
/* eslint-disable-next-line no-underscore-dangle */
global.___loader = {
enqueue: jest.fn()
};

0 comments on commit 4ca1390

Please sign in to comment.