Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

event.nativeEvent missing attributes after fireEvent #342

Closed
mattharrigan opened this issue Apr 3, 2019 · 0 comments
Closed

event.nativeEvent missing attributes after fireEvent #342

mattharrigan opened this issue Apr 3, 2019 · 0 comments

Comments

@mattharrigan
Copy link

mattharrigan commented Apr 3, 2019

  • react-testing-library version: 6.0.4
  • react version: 16.8.2
  • node version: 10.14.1
  • npm version: 6.8.0

Relevant code or config:

App.js

import React, { Component } from "react";

class App extends Component {
  state = {
    x: null,
    y: null
  };

  handleMouseDown({ nativeEvent }) {
    console.log("nativeEvent", nativeEvent);
    this.setState({ x: nativeEvent.offsetX, y: nativeEvent.offsetY });
  }

  render() {
    return (
      <div>
        <svg width="400" height="400">
          <rect
            x={0}
            y={0}
            width={400}
            height={400}
            fill="rgb(0,0,255)"
            onMouseDown={evt => this.handleMouseDown(evt)}
            data-testid="rect"
          />
        </svg>
        <span data-testid="message">
          ({this.state.x},{this.state.y})
        </span>
      </div>
    );
  }
}

export default App;

App.test.js

import React from "react";
import { render, fireEvent, prettyDOM } from "react-testing-library";
import "jest-dom/extend-expect";
import "react-testing-library/cleanup-after-each";
import App from './App'


test('first test', () => {
  const { container, getByTestId } = render(<App />);
  const rect = getByTestId('rect')
  fireEvent.mouseDown(rect, { offsetX: 10, offsetY: 20, button: 0 });
  console.log(prettyDOM(container))
  const text = getByTestId('message')
  console.log(prettyDOM(text))
  expect(getByTestId('message')).toHaveTextContent('(10,20)')
})

What you did:

Test a react component which has event handlers for mouse events

What happened:

Test failed. console.log indicates that the event does not contain a nativeEvent similar to what is present when running in the browser (chrome 73.0.3683.86)

Reproduction:

https://codesandbox.io/s/61ol4lxnvk

Problem description:

console.log from App.handleMouseDown is different when testing vs running in the browser

Suggested solution:

Unknown

Not sure if this is a bug or something I am doing incorrectly. If the second, an example in the docs might be a good addition. Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant