danny-andrews

/**
 * Returns internal [[Class]] property of an object
 *
 * Ecma-262, 15.2.4.2
 * Object.prototype.toString( )
 *
 * When the toString method is called, the following steps are taken: 
 * 1. Get the [[Class]] property of this object. 
 * 2. Compute a string value by concatenating the three strings "[object ", Result (1), and "]". 
 * 3. Return Result (2).

danny-andrews

@dschinkel

You should test those two methods indirectly by testing the behavior... So I'm disagreeing with @markerikson, test through your connected component.

Are you suggesting that you should forego exporting the unconnected component entirely and only test the connected component? I think that is "over testing." This ties your tests unnecessarily to the implementation details of the component it is testing. Because the functionality of the unconnected component (if it has any, that's a whole other can of worms) is completely unrelated to where it receives its props from. Maybe you want to turn that component into a purely presentational component in the future. If you test the connected component, you'll have to change all your tests to not inject a store anymore but pass the props in directly. If you tested the unconnected component, you don't have to do anything except blow away the connected-component-specific tests (more on that below).

I do agree that you should not directly test `mapState

danny-andrews

const removeTrailingSlash = path => path.replace(/\/$/, '');
const ensureTrailingSlash = path => `${removeTrailingSlash(path)}/`;

// Universal usage (no reliance on `document`)
const parseUrl = (href) => {
  const match = href.match(/^(https?:)\/\/(([^:/?#]*)(?::([0-9]+))?)([/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
  return match && {
    protocol: match[1],
    host: match[2],
    hostname: match[3],

danny-andrews

// Well, shit
const verticalModifiers = ['top', 'middle', 'bottom'];
const horizontalModifiers = ['start', 'center', 'end'];
const modifiers = verticalModifiers.concat(horizontalModifiers);
const getPassthroughClassNames = () => modifiers
  .map(name => [name, props[name]])
  .filter(([, value]) => value)
  .map(([name, value]) => `${name}-${value}`)
  .map(getClass);

danny-andrews

// Named replacements!
const formatString = (string, substitutions = {}) =>
  string.replace(
    /%{([^}]+)}/g,
    (match, id) => {
      return substitutions.hasOwnProperty(id) ? substitutions[id] : match
    }
  );

formatString('%{noun} is %{adjective}', {

danny-andrews

<div id="root"></div>

danny-andrews

Disclaimer: This article is in no way meant to belittle the react-css-modules project, or its author. Gajus is a smart dude and does a lot of great work for free for the JavaScript community to enjoy! ❤️ This is merely an evaluation of this particular library.

As with many popular libraries, I'm sure "react-css-modules" had a valid use-case at the time it was created, but at the present, it's drawbacks far outweigh its benefits. This article is meant to be a warning against picking it up without thinking about what you get from it.

tl;dr: Use "css-loader" over "react-css-modules"/"babel-plugin-react-css-modules" because the latter relies on side-effects, adds cognitive overhead (too much 🦄 ), causes React errors in your tests, requires complex webpack config, requires an additional dependency, is slower than css-loader, and doesn’t work with webpack/babel import aliases.

"PROs"*

**Throws error when trying to use an undefined class name.

danny-andrews

import styles from './styles.css';
import classnames from 'classnames';

<div className={classnames(styles.localClass, 'global-class')}>Hi</div>;

danny-andrews

// With react-css-modules
import './styles.css';

<div className="global-class" styleName="local-class">Hi</div>;

// With css-loader
import styles from './styles.css';

<div className=`${styles.localClass} global-class`>Hi</div>;

danny-andrews

// With css-loader
import styles from './styles.scss';

export default () => <div className={styles.myClass}>Hi</div>;

// With react-css-modules
import './styles.scss';

export default () => <div styleName="myClass">Hi</div>;