/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    ul: "ul",
    li: "li",
    h2: "h2"
  }, _provideComponents(), props.components), {YouTube} = _components;
  if (!YouTube) _missingMdxReference("YouTube", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.h1, {
      id: "testing-react-applications-in-practice",
      children: ["Testing React Applications in Practice", _jsx(_components.a, {
        className: "anchor",
        href: "#testing-react-applications-in-practice"
      })]
    }), "\n", _jsx(_components.p, {
      children: "A 5-hour live workshop about TDD and testing React applications. During this time, we'll write a currency converter and cover it with tests. I'll show how to:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Extract and test business logic using pure functions;"
      }), "\n", _jsx(_components.li, {
        children: "Divide the code into modules so that it's easy to test them;"
      }), "\n", _jsx(_components.li, {
        children: "Apply different mock strategies, prepare stubs and test data;"
      }), "\n", _jsx(_components.li, {
        children: "Test side-effects and React hooks;"
      }), "\n", _jsx(_components.li, {
        children: "Work with asynchronous functions and test them;"
      }), "\n", _jsx(_components.li, {
        children: "Connect third-party libraries via adapters for convenient testing."
      }), "\n"]
    }), "\n", _jsxs(_components.h2, {
      id: "video",
      children: ["Video", _jsx(_components.a, {
        className: "anchor",
        href: "#video"
      })]
    }), "\n", _jsx(YouTube, {
      src: "https://www.youtube.com/embed/oaktsy6YKMk",
      caption: "Talk on YouTube (English subtitles)"
    }), "\n", _jsxs(_components.h2, {
      id: "slides-sources-and-related-posts",
      children: ["Slides, Sources, and Related Posts", _jsx(_components.a, {
        className: "anchor",
        href: "#slides-sources-and-related-posts"
      })]
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://www.youtube.com/embed/oaktsy6YKMk",
          children: "Talk in Russian with English Subtitles"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://bespoyasov.me/slides/testing-workshop/",
          children: "Slides and Sources"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://github.com/bespoyasov/testing-workshop",
          children: "App Source Code on GitHub"
        })
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Talk on the benefits of TDD and how to implement it in your project, with a little live coding session at the end.

TDD: What, How, and Why

How teaching helps build communication more effectively, and where else it proves useful.

Testing React Applications in Practice

Video

Slides, Sources, and Related Posts

If you liked the post