Possibility to mutate string nodes in JSX/TSX

[limonte]

trafficstars

Is your feature request related to a problem? Please describe. I'd like Stryker to be able to test simple string nodes in JSX/TSX:

<div>
  <h1>Hello there</h1>
  <p>This is a basic component</p>
</div>

Here's the simple repo demonstrating that Stryker isn't covering the This is a basic component part: https://github.com/limonte/stryker-sandbox

The test only covers

expect(screen.getByText('Hello there')).toBeInTheDocument();

and it doesn't cover This is a basic component.

Despite that both jest and Stryker report 100% coverage while it's not true as This is a basic component isn't verified.

The expected on the screenshot above would be mutating the This is a basic component string and reporting that it's not covered with tests.

[JimLynchCodes]

I think you are onto something here @limonte!

I agree that it seems like we are not fully asserting that all the code is as it should be. I think a lot of the javascript mutators could be applied in a similar way here.

Here are just a few potential jsx mutators I can think of:

• delete each element

• delete attribute of each element

• replace attribute value of each element with different value

• (for elements like

  that take inner html), change inner html of each element

Also, I think these same mutators could be applied not just to jsx / tsx but more generally to mutation testing of any markup language (like Angular or regular html files).

[odinvanderlinden]

Hi @limonte, thanks for opening an issue. Sorry for the late response, because of the summer holiday we haven't really been active with developing Stryker. Currently we support mutating Javascript statements inside JSX. For now we don't have plans to implement mutating HTML elements inside JSX in the near future as this is Stryker for Javascript and not Stryker for HTML. Though in the future we would like to add the possibility for StrykerJS users to create their own mutators just like in Stryker.NET. I Hope this answers your question

[limonte]

Hey @odinvanderlinden and thank you for the reply!

I'm not sure how familiar you are with React, but JSX/TSX isn't HTML. It's JS/TS that looks like HTML.

Here's a nice article that explains what I mean: https://legacy.reactjs.org/docs/jsx-in-depth.html

<p>This is a basic component</p> equals to this JS after compilation:

React.createElement(
  'p',
  { 
    children: 'This is a basic component'
  }
)

It's a simple JS with strings, that can be mutated.

---

In other words, when Stryker for JS is working on JSX/TSX it should compile these files down to JS/TS and then run all the possible mutations on the compiles files, see https://babeljs.io/repl/#?presets=react&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG4B8AEhlogO5xnr0AhLQD0jVgG4iAXyJA

[odinvanderlinden]

Thanks for the fast reply, i'm familiar with JSX/TSX so i know how it works. If we are going to mutate strings inside babel we are basically testing if babel works correctly wich is something we shouldn't do i think. Also the strings we write inside these HTML like JSX elements are constants because they can't change. Except ofcourse if we write it in a javascript statement and we already mutate those. So in my eyes in the end we are still mutating something that is ment to be HTML.