diff --git a/packages/react-hot-loader/src/utils.dev.js b/packages/react-hot-loader/src/utils.dev.js index de79ddbd1..4da0f09f1 100644 --- a/packages/react-hot-loader/src/utils.dev.js +++ b/packages/react-hot-loader/src/utils.dev.js @@ -5,7 +5,12 @@ import { setConfig as setProxyConfig } from 'react-stand-in' setProxyConfig({ logger }) +const getProxyOrType = type => { + const proxy = getProxyByType(type) + return proxy ? proxy.get() : type +} + export const areComponentsEqual = (a, b) => - getProxyByType(a) === getProxyByType(b) + getProxyOrType(a) === getProxyOrType(b) export const setConfig = config => Object.assign(reactHotLoader.config, config) diff --git a/packages/react-hot-loader/test/utils.test.js b/packages/react-hot-loader/test/utils.test.js new file mode 100644 index 000000000..3f6d5b924 --- /dev/null +++ b/packages/react-hot-loader/test/utils.test.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react' +import reactHotLoader from '../src/reactHotLoader' +import { areComponentsEqual } from '../src/utils.dev' + +reactHotLoader.patch(React) + +describe('utils (dev)', () => { + describe('areComponentsEqual', () => { + const createClasses = () => { + class Component1 extends Component { + render() { + return 42 + } + } + + class Component2 extends Component { + render() { + return 43 + } + } + + return { Component1, Component2 } + } + + const createStateless = () => { + const Component1 = () => 42 + const Component2 = () => 43 + return { Component1, Component2 } + } + + const testSuite = factory => { + it('should compare non-registred components', () => { + const { Component1, Component2 } = factory() + + const element1 = + const element2 = + + expect(Component1 === Component2).toBe(false) + expect(Component1 === element1.type).toBe(false) + + expect(areComponentsEqual(Component1, element1.type)).toBe(true) + expect(areComponentsEqual(Component1, element2.type)).toBe(false) + }) + + it('should compare registered components', () => { + const { Component1, Component2 } = factory() + + reactHotLoader.register(Component1, 'Class1', 'util.dev') + reactHotLoader.register(Component2, 'Class2', 'util.dev') + + const element1 = + const element2 = + + expect(Component1 === Component2).toBe(false) + expect(Component1 === element1.type).toBe(false) + + expect(areComponentsEqual(Component1, element1.type)).toBe(true) + expect(areComponentsEqual(Component1, element2.type)).toBe(false) + }) + } + + describe('class based', () => testSuite(createClasses)) + + describe('function based', () => testSuite(createStateless)) + }) +})