Step 1 — Switch from React to Preact #2
Conversation
| @@ -3,19 +3,24 @@ | |||
| "version": "0.1.0", | |||
| "private": true, | |||
| "dependencies": { | |||
| "react": "^16.3.2", | |||
| "react-dom": "^16.3.2", | |||
There was a problem hiding this comment.
Getting rid of react and react-dom
| "react": "^16.3.2", | ||
| "react-dom": "^16.3.2", | ||
| "preact": "^8.2.7", | ||
| "preact-compat": "^3.18.0", |
There was a problem hiding this comment.
And replace it with preact and preact-compat
| // Hack the webpack config to load Preact instead of React | ||
| module.exports = webpackConfig => | ||
| (webpackConfig.resolve.alias = Object.assign({}, webpackConfig.resolve.alias, { | ||
| react: 'preact-compat', |
There was a problem hiding this comment.
whenever webpack is loading react, it will grab preact-compat instead
| // Map React's testing classes to Preact | ||
| const newJestConfig = function() { | ||
| const config = jestConfig.apply(this, arguments); | ||
| config.moduleNameMapper = Object.assign({}, config.moduleNameMapper, { |
There was a problem hiding this comment.
whenever jest tries to load or mock any react* modules, it will get the preact* equivalents.
| }; | ||
|
|
||
| // HACK ALERT! | ||
| module.constructor._cache[ |
There was a problem hiding this comment.
HACK ALERT!
Preload Node's module cache with the hacked jest config we just made.
| @@ -2,6 +2,13 @@ import React, { Component } from 'react'; | |||
| import logo from './logo.svg'; | |||
| import './App.css'; | |||
|
|
|||
| // This is just a Thing | |||
| class Thing extends Component { | |||
There was a problem hiding this comment.
Just a Thing to show off shallow/deep rendering during testing.
| * Remove __self and __source from the list of attributes/properties. | ||
| * babel-preset-react adds these for use with the React DevTools | ||
| */ | ||
| function removeDevAttributes(vnode) { |
There was a problem hiding this comment.
babel-preset-react adds __self and __source as props to every Component.
We need this small patch to make them go away and have reliable snapshot testing.
See preactjs/preact-render-to-string#43 (comment) for more info.
sampi
changed the title
It's time to get hacking!
The main idea here is that we alias
react*modules with theirpreact*equivalents and pull inpreact-compatto make sure the API stays the same. This is done both for Node andwebpack.For testing, it's a bit trickier, we pull in
preact-render-to-jsonand put it on theglobalscope to be available in all tests.Due to
babel-preset-react, we need to remove__selfand__sourcefrom the output JSON to be able to reliably use snapshot testing injest.File sizes:
Source Map Analyzer output:
