Setting up Jest with React and Phaser

npm i --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer
Syntax Error for require
const presets = [
targets: {
browsers: [">0.25%", "not ie 11", "not op_mini all"]
modules: false
const plugins = [
module.exports = { presets, plugins };
Cannot set property ‘fillStyle’ of null on the Phaser import
"jest": {
"setupFiles": ["jest-canvas-mock"]
An invalid token error for our png
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
"setupFiles": [
"moduleFileExtensions": [
"moduleNameMapper": {
"\\.(css|less|sass|scss)$": "<rootDir>/test/mocks/styleMock.js",
"\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/mocks/fileMock.js"
const { config } = require("../src/index.js");test("string is a string", () => {
expect(typeof "string").toBe("string");
test("config is an object", () => {
expect(typeof config).toBe("object");
Invariant Violation for the rendered element not being attached to a DOM element
<App />,
document.getElementById("root") || document.createElement("div")




Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 Nuxt Modules to Use in Your Next Project

Styling CSS Dasar | ReactJS

Taking PatternLab modularity to the next level

New Total.js v4 release (+0.0.46)

Notable Updates of the Front-end Ecosystem in 2021

Deploying a Tor Hidden Service to Heroku in 5 Minutes

Understanding Streams By Implementing Your Own Pt 2

Mapping StackOverflow into real-time assistance

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Taylor Nodell

Taylor Nodell

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor

More from Medium

Combining useParams with useEffect for dynamic routes

React logo

Using Updated State value in React After Immediate State Update

An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-V

Performant React 101: The difference between `useEffect` and `useLayoutEffect`