[Gatsby v2] Jest unit testing and configuration for Gatsby #5824
Description
Description
I was working my way through the upgrade process to v2 for my website and wanted to report a couple things while running my unit tests with Jest and Gatsby v2 (coming from v1).
Cannot find module './pages.json' from 'gatsby-browser-entry.js'
I am seeing this in some specs when running unit tests
FAIL src/components/header/header.spec.jsx
● Test suite failed to run
Cannot find module './pages.json' from 'gatsby-browser-entry.js'
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:169:17)
at Object.<anonymous> (node_modules/gatsby/cache-dir/gatsby-browser-entry.js:20:37)
# component
import React from 'react';
import { Link } from 'gatsby';
import './header.css';
const Header = () => {
return (
<div className="header">
<Link to="/">
<header></header>
<h2 className="caption">A DREAMER BY DESIGN</h2>
</Link>
</div>
);
};
export default Header;
# spec
import * as React from 'react';
import { mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Header from './header';
configure({ adapter: new Adapter() });
describe('Header Component', () => {
let header;
beforeEach(() => {
header = mount(<Header/>);
});
it('should not be null', () => {
expect(header).not.toBeNull();
expect(header.find('.header').length).toEqual(1);
});
});Note sure if it is related to this issue?
.babelrc
Not so much an issue with Gatsby per se, but maybe worth an update somewhere in the docs, which I am happy to do as it is a change in expected behavior. (relative to v1)
I had a .babelrc file in the root of my project which was read by Jest to process JSX and ES2015+ syntax.
{
"presets": ["react", "env"]
}After the upgrade, Gatsby which now depends on Babel 7, will now reflect Babel's configuration resolution behavior, which will now defer to the consuming project's top level .babelrc instead, which generated this error
success onPostBootstrap — 0.001 s
info bootstrap finished - 3.68 s
error Generating JavaScript bundles failed
Error: Cannot find module 'env'
- v8-compile-cache.js:162 require.resolve
[www.thegreenhouse.io]/[v8-compile-cache]/v8-compile-cache.js:162:23
- babel-config.js:17 abstractConfig.presets.forEach.p
[www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:17:61
- Array.forEach
- babel-config.js:17 buildConfig
[www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:17:26
- babel-config.js:52
[www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:52:19
- Generator.next
- next_tick.js:131 _combinedTickCallback
internal/process/next_tick.js:131:7
- next_tick.js:180 process._tickCallback
internal/process/next_tick.js:180:9
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c yarn lint && rimraf ./public && gatsby build
Solution was to delete my .babelrc file and "move" the configuration over to Jest, per the recommendation here to avoid the conflict.
Steps to reproduce
- Followed the v2 Upgrade guide
- Updated relevant specs to use enzyme-adapter-react-16
- Moved Babel configuration to Jest (see description above ^)
Expected result
- Unit tests would continue to pass
Actual result
- Some tests fail with this error
success onPostBootstrap — 0.001 s
info bootstrap finished - 3.68 s
error Generating JavaScript bundles failed
Error: Cannot find module 'env'
- v8-compile-cache.js:162 require.resolve
[www.thegreenhouse.io]/[v8-compile-cache]/v8-compile-cache.js:162:23
- babel-config.js:17 abstractConfig.presets.forEach.p
[www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:17:61
- Array.forEach
- babel-config.js:17 buildConfig
[www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:17:26
- babel-config.js:52
[www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:52:19
- Generator.next
- next_tick.js:131 _combinedTickCallback
internal/process/next_tick.js:131:7
- next_tick.js:180 process._tickCallback
internal/process/next_tick.js:180:9
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c yarn lint && rimraf ./public && gatsby buildEnvironment
$ ./node_modules/.bin/gatsby info --clipboard
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.4 - /usr/local/bin/node
Yarn: 1.5.1 - ~/.yarn/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Browsers:
Chrome: 67.0.3396.79
Firefox: 60.0.1
Safari: 11.1.1
npmPackages:
gatsby: next => 2.0.0-alpha.51
gatsby-cli: ^1.1.58 => 1.1.58
gatsby-plugin-google-analytics: next => 1.0.20-10
gatsby-plugin-react-helmet: next => 2.0.12-7
gatsby-plugin-sitemap: next => 1.2.14-10
gatsby-plugin-typography: next => 2.0.1-11File contents (if changed)
gatsby-config.js
module.exports = {
siteMetadata: {
title: 'The Greenhouse I/O',
siteUrl: 'https://www.thegreenhouse.io',
description: 'Personal / portfolio website for The Greenhouse.'
},
plugins: [
'gatsby-plugin-typography',
'gatsby-plugin-sitemap',
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-plugin-google-analytics',
options: {
trackingId: 'xxx',
head: true
}
}
]
};package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A
Thanks for everything and let me know if you need more info! The upgrade was straightforward for me and everything else is working as expected. 👍
Update
Original issue addressed here 🎉