what's the best tool set to use for testing react components in Deno?

Ideally something very fast for TDD.

2 Replies

I wasn't able to find the answer to your question in the official Deno documentation, as it primarily focuses on Deno-specific features and runtime capabilities. However, when it comes to testing React components in Deno, the ecosystem is still evolving, and there may not be a direct equivalent to some of the React testing tools you might be familiar with from other environments like Node.js. That being said, Deno comes with a built-in test runner that you can use for testing your code. For testing React components, you might need to look into community-driven solutions or consider setting up a custom testing environment that suits your needs for TDD with React in Deno. Please note that this advice is not based on the Deno documentation, and I would recommend double-checking the accuracy of this advice and looking for any community tools or best practices that may have emerged for testing React components in Deno.

Helpful Links: Testing in Deno The State of Edge Functions 2023: The Year of Globally Distributed Apps Using React with Deno | Deno Docs Deno 1.21 Release Notes How to use React with Deno | Deno Docs How to use React with Deno | Deno Docs How to publish Deno modules to NPM Blog | Deno

dan.the.discloserOP•7mo ago

This is an example from jest document to test react with node Mainly i am wondering how to get the functionality of tree.props.onMouseEnter()

import renderer from 'react-test-renderer';
import Link from './Link';



it('changes the class when hovered', () => {
  const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>,
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  renderer.act(() => {
    tree.props.onMouseEnter();
  });
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  renderer.act(() => {
    tree.props.onMouseLeave();
  });
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

import renderer from 'react-test-renderer';
import Link from './Link';



it('changes the class when hovered', () => {
  const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>,
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  renderer.act(() => {
    tree.props.onMouseEnter();
  });
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  renderer.act(() => {
    tree.props.onMouseLeave();
  });
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});