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 = [
[
"@babel/env",
{
targets: {
browsers: [">0.25%", "not ie 11", "not op_mini all"]
},
modules: false
}
],
"@babel/preset-react"
];
const plugins = [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-modules-commonjs"
];
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": [
"jest-canvas-mock"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"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
ReactDOM.render(
<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

HTML TUTORIAL FOR BEGINNERS PART 4

Angular and Benefits of Angular

How to Use the Vuetify Bottom Navigation Component

My notes on making a multiform in React

In continuation of task 7.1

The Execution Order of Asynchronous Functions in the Event Loop

Redux Made Easy #1: What is ‘reducer’ (and why it’s called that)

How to start using React Router

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

React.js useCallback Hell!

How I built my React app from the scratch with Webpack and Babel

Upgrade to react 18 — Issues and resolution

Virtual DOM: Why it Improves UI Performance