<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Grid, Cell, TabsContainer, Tabs, Tab } from 'react-md';

import Markdown from 'components/Markdown';

import testing from '!!raw-loader!utils/testing.js';

import Preview from '!!raw-loader!components/Customization/ThemeBuilder/Preview.jsx';
import PreviewTest from '!!raw-loader!components/Customization/ThemeBuilder/__tests__/Preview.jsx';
import Search from '!!raw-loader!components/Search/index.jsx';
import SearchTest from '!!raw-loader!components/Search/__tests__/index.jsx';

import './_styles.scss';

const markdown = `
# Testing with react-md
Right now you _should_ be able to test most your application using your favorite test runner. The
problems you will run into are when components use the \`ResizeObserver\` or you use a snapshotting
feature like [jest's snapshot testing](https://facebook.github.io/jest/docs/snapshot-testing.html).

### resize-observer-polyfill
Some of the components use the \`ResizeObserver\` component to handle positioning calculations. Since it uses the
[resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill) behind the scenes, you _might_
run into an error:

\`\`\`bash
ReferenceError: SVGElement is not defined
  at ~/code/your-repo/node_modules/resize-observer-polyfill/dist/ResizeObserver.js:651:57
\`\`\`

This error occurs since jsdom has not implemented the \`SVGElement\` and when running tests, the \`resize-observer-polyfill\`
does an _unsafe_
[check](https://github.com/que-etc/resize-observer-polyfill/blob/b0fb530f16666030577c5f252f84c95598af7330/dist/ResizeObserver.js#L641-L652)
for determining if the element is an SVG. You can do a "hack" before your test to get your tests working:

\`\`\`js
global.SVGElement = Element;
\`\`\`

This should allow your tests to work as expected and not crash.

## Snapshot Testing
Some of my components use \`findDOMNode\` behind the scenes to be able to do calculations for positioning and other
things, but this doesn't work with [react-test-renderer](https://github.com/facebook/react/issues/7371#issuecomment-260946945).

There are a couple of ways to work around this:
- mock the \`react-md\` components that fail
  > The problem with mocking out the \`react-md\` components is that it becomes difficult if you want some reasonable
  > markup after mocking. It will basically be the entire component from \`react-md\`, but without some of the
  > lifecycle methods and ref callbacks.
- use a different renderer for the snapshots
  > A downside with this is that the snapshots have a little bit less information than the \`react-test-renderer\`<commit_msg>Updated testing documentaiton for window.matchMedia<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Grid, Cell, TabsContainer, Tabs, Tab } from 'react-md';

import Markdown from 'components/Markdown';

import testing from '!!raw-loader!utils/testing.js';

import Preview from '!!raw-loader!components/Customization/ThemeBuilder/Preview.jsx';
import PreviewTest from '!!raw-loader!components/Customization/ThemeBuilder/__tests__/Preview.jsx';
import Search from '!!raw-loader!components/Search/index.jsx';
import SearchTest from '!!raw-loader!components/Search/__tests__/index.jsx';

import './_styles.scss';

const markdown = `
# Testing with react-md
Right now you _should_ be able to test most your application using your favorite test runner. The
problems you will run into are when components use the \`ResizeObserver\` or you use a snapshotting
feature like [jest's snapshot testing](https://facebook.github.io/jest/docs/snapshot-testing.html).

### resize-observer-polyfill
Some of the components use the \`ResizeObserver\` component to handle positioning calculations. Since it uses the
[resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill) behind the scenes, you _might_
run into an error:

\`\`\`bash
ReferenceError: SVGElement is not defined
  at ~/code/your-repo/node_modules/resize-observer-polyfill/dist/ResizeObserver.js:651:57
\`\`\`

This error occurs since jsdom has not implemented the \`SVGElement\` and when running tests, the \`resize-observer-polyfill\`
does an _unsafe_
[check](https://github.com/que-etc/resize-observer-polyfill/blob/b0fb530f16666030577c5f252f84c95598af7330/dist/ResizeObserver.js#L641-L652)
for determining if the element is an SVG. You can do a "hack" before your test to get your tests working:

\`\`\`js
global.SVGElement = Element;
\`\`\`

This should allow your tests to work as expected and not crash.

### window.matchMedia
When running tests using the \`Drawer\`/\`NavigationDrawer\` component, you might run into an error:

> TypeError: window.matchMedia is not a function

This can be fixed by mocking the \`window.matchMedia\` function in your test setup scripts. A simple mock would be:

\`\`\`js
if (typeof window.matchMedia !== 'function') {
  window.matchMedia = jest.fn(query => ({
    matches: query.includes('(min-width: 1025px)'),
  }));
}
\`\`\`

Some more information can be found in [#783](https://github.com/mlaursen/react-md/issues/783#issuecomment-415919067).


## Snapshot Testing
Some of my components use \`findDOMNode\` behind the scenes to be able to do calculations for positioning and other
things, but this doesn't work with [react-test-renderer](https://github.com/facebook/react/issues/7371#issuecomment-260946945).

There are a couple of ways to work around this:
- mock the \`react-md\` components that fail
  > The problem with mocking out the \`react-md\` components is that it becomes difficult if you want some reasonable
  > markup after mocking. It will basically be the entire component from \`react-md\`, but without some of the
  > lifecycle methods and ref callbacks.
- use a different renderer for the snapshots
  > A downside with this is that the snapshots have a little bit less information than the \`react-test-renderer\`
{'fraction_non_alphanumeric': 0.10564784053156147, 'fraction_numerical': 0.021096345514950165, 'mean_word_length': 4.783861671469741, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 9, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6809688', 'n_tokens_mistral': 1877, 'n_tokens_neox': 1770, 'n_words': 636}