Search code examples
reactjsjestjstravis-cigithub-pagesdocusaurus

Jest not defined in Travis CI when deploying Docusaurus v2 to GitHub pages

I'm currently working to setup a Docusaurus v2 site on GitHub pages. I have written my own Jest and Enzyme tests for my own components. Currently Jest is listed as a devDependency and my .travis.yml is as follows:

# .travis.yml
language: node_js
node_js:
  - '10'
branches:
  only:
    - master
cache:
  npm: true
install:
  npm i
script:
  - git config --global user.name "${GH_NAME}"
  - git config --global user.email "${GH_EMAIL}"
  - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
  - npm t && GIT_USER="${GH_NAME}" npm run deploy

I have updated my package.json scrips section to call jest relative to node_modules like so:

"test": "cross-env NODE_ENV=test ./node_modules/jest/bin/jest.js --detectOpenHandles"

This runs absolutely fine in travis and I see all my tests pass. The issue I am having is when it attempts to deploy the site to GitHub pages, as seen on the last line of the scripts section in .travis.yml: npm t && GIT_USER="${GH_NAME}" npm run deploy. I subsequently receive the following error:

ReferenceError: jest is not defined
(undefined) ReferenceError: jest is not defined
    at Module.module.exports.Object.defineProperty.value (main:26124:1)
    at __webpack_require__ (main:21:30)
    at Promise.resolve.then (main:79206:682)
Error: Failed to compile with errors.
    at compiler.run (/home/travis/build/myorg/myrepository/node_modules/@docusaurus/core/lib/commands/build.js:37:24)
    at finalCallback (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:254:12)
    at runWithDependencies.err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:277:6)
    at done (/home/travis/build/myorg/myrepository/node_modules/neo-async/async.js:2931:13)
    at runCompilers (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:181:48)
    at err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:188:7)
    at compiler.run (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:270:7)
    at finalCallback (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:257:39)
    at hooks.done.callAsync.err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:273:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/travis/build/myorg/myrepository/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/home/travis/build/myorg/myrepository/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:271:21)
    at hooks.afterCompile.callAsync.err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/travis/build/myorg/myrepository/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/travis/build/myorg/myrepository/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:678:31)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: `docusaurus deploy`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I might be wrong but I believe this is because my tests are being deployed as part of the codebase and as jest is a devDependency it does not exist at this stage; hence webpack can't find it when it's used in my *.spec.js files, i.e. jest.mock(...). Therefore, adding jest as a normal dependency I think could fix this, although as you can appreciate that's not ideal nor the right approach. For reference I do not have my test files in __TESTS__ or any form of test directory. As I've followed the container pattern all my spec files are adjacent to what they are testing. The structure of which is similar to this:

components
  - Header
    - HeaderComponent.js
    - HeaderComponent.spec.js
    - HeaderContainer.js
    - HeaderContainer.spec.js
    - Header.module.css

Quick sidenote: Not all my components have containers thanks to react hooks, but a few do utilise multiple bits of state, event handlers etc; in these instances, I feel it cleaner to split them into a container.

Is there a better way for me to fix this other than making jest a regular dependency? The setup I am after is:

  1. User raises pull request & Travis builds branch (only passing PRs to be merged).
  2. Once PR has landed in master Travis runs above scripts and deploys to Github pages.

Any help would be much appreciated :)

Solution

  • Docusaurus maintainer here!

    It's weird that webpack is picking up the test files. Did you put the components in the pages directory? If so, it might cause Docusaurus to be thinking that the tests are pages itself.

    Is your repo public? Sharing it would definitely help. All JS files within src/pages will become routes so do make sure that all JS files within src/pages can be turned into pages and export a React component. Your components directory isn't within src/pages. It should be in src/components.