Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

SafeTest: A novel approach to front end testing

netflixtechblog.com

Post reply on HN
Print view View original

21–30 of 35 posts

Re: SafeTest: A novel approach to front end testing

#21

Post by willio58 »

Lots of negativity in the comments but I think the solutions outlined really interesting and valuable! There are some idiosyncrasies around unit testing ui that are just hard to work around. And the issues with e2e tests in the context of testing individual UI pieces are totally valid too.

The one thing that at least initially rubs me the wrong way is how the overrides work. Like I get why that's a solution to how we can inject some data, but I don't like the idea of writing test-specific code in a component just to enable tests with this tool. That being said, I've done similar things in the past when I've run out of options and this looks pretty clean, I just wonder if there's another way.

Re: SafeTest: A novel approach to front end testing

#22

Post by bryanrasmussen »

kolodny wrote: post #20
bryanrasmussen wrote: post #19

Are there potential performance issues to consider with overrides - I'm supposing const FetchPerson = createOverride(fetchPerson); must be less performant by some amount than just using fetchPerson? How many over-rides do you find a reasonably complex component needs?

React is pretty performant when context isn't changing. We haven't done any benchmarking but I doubt there's any real world perf hit. For large applications the number of overrides tend to be under 20. Overrides are opt-in so you can just expose any overridable value as a prop and run a isolated component test on it.

cool

any common mistakes you see people make in writing overrides or is it too early to make conclusions?

Re: SafeTest: A novel approach to front end testing

#23

Post by thom »

I think this is overselling itself a little. It seems genuinely useful to be able to do more expansive integration tests of components, and combinations of components, especially running in real browsers. But that’s only really an incremental gain over component unit tests with mocks. In the case where you own a very complex SPA with multiple back end dependencies you don’t control, then yeah, maybe this is all you need. But I don’t see how this can replace real end to end functional tests in most apps.

Re: SafeTest: A novel approach to front end testing

#24

Post by thom »

kolodny wrote: post #16
drewcoo wrote: post #14

Earlier quoted context omitted.

If you want to do it with the whole page and talk only to the local code, then yes, I'd recommend Sinon. I think that's a much simpler solution than . . . creating an all new NIH framework! I'd also recommend refactoring to a more mock-friendly way to do that countdown if you don't want to cover up all the internal logic. If the timeout interval is loaded remotely from some API (and it probably is if you have reasona…

The point is that you shouldn't need to rewrite your countdown component to allow testing. Can you provide a snippet of that change and what the test would look like? Not being toggle parts of the app is the root of the issue when creating e2e tests. For example overriding a feature flag, you could find the API call for the feature but what if it's a grpc call and part of your dev build pulls in any update, you can't…

Does it not feel a little old-fashioned to dynamically rebind stuff to force some code to be testable, rather than just write it to be testable in the first place? If I saw someone doing this in any other test suite I’d suggest making the dependencies explicit.

Re: SafeTest: A novel approach to front end testing

#26

Post by somewhereoutth »

I've said it before, and I'll say it again: Interfaces used by humans must be tested by humans. These can either be your staff, or your customers.

Yes that does mean wading through each interaction pathway every time you make a release, there really is no substitute.

Re: SafeTest: A novel approach to front end testing

#27

Post by technion »

somewhereoutth wrote: post #26

I've said it before, and I'll say it again: Interfaces used by humans must be tested by humans. These can either be your staff, or your customers. Yes that does mean wading through each interaction pathway every time you make a release, there really is no substitute.

I think netflix is at a scale where you can question what I'm saying below, but every frontend test suit I've seen is so full of mocks you basically only test your own test suite. And then common front end bugs like "renders off the screen" or "doesnt work in safari" aren't caught anyway.

I hugely support tests and I write a lot more of them than most people. I just don't think it usually works on the frontend.

Re: SafeTest: A novel approach to front end testing

#28

Post by hmeh »

kolodny wrote: post #13
drewcoo wrote: post #12

> Conversely, using integration testing tools like Cypress or Playwright provides control over the page, but sacrifices the ability to instrument the bootstrapping code for the app. These tools operate by remotely controlling a browser to visit a URL and interact with the page. I don't think the author has used Cypress or Playwright. Their real value is that they do not drive browsers from the outside like slow, flak…

Author here. Can you show an example of how Playwright would progress a timer on a page? For example, how would you make this component pass faster than 60 seconds? export const Countdown = () => { const [time, setTime] = React.useState(60); React.useEffect(() => { const interval = setInterval(() => { setTime(t => t - 1); if (t === 1) clearInterval(interval); }, 1000); return () => clearInterval(interval) }, []); ret…

I'm afraid the answer to this doesn't actually lie in tooling. It lies in software design. If something needs to be controlled, it needs to be controllable. Typically this means push. In a React component, this means props. It could be an optional prop, but once that prop was there, this component could be controlled. Once the component could be controlled via push, the page rendering the component could also be controlled via push. How do you push to a page? Query string params is the most straightforward.

So, imagine a page that rendered a version of this component that a human could navigate to (this is what was historically called a test fixture before Rails rewrote the meaning of this word), then imagine that that human could have complete control over this interval by setting a query string argument. A human can do all of the interactive testing they need. Then, when it comes time to automate, all we need to do is automate what the human can already do.

This is another principle of automation that has been lost in history. We should first be able to do things manually before automating them. When we (as automaters) jump right to automation we often simultaneously necessitate and embrace (again, because we identify as automaters) additional complexity in the form of tooling.

I'd venture a guess that SafeTest is not likely to be necessary for the things that it was built for. Software design could have solved the problems with significantly less complexity and tooling while simultaneously providing useful test fixtures for humans to explore.

Storybook kind of enables, but it's also tooling fixation in my opinion. That's another post, however.

Oh, and I saw your other post about rewriting components to allow testability. You may be attempted to accuse me of suggesting that here. I'm not. I'm suggesting that components are written with fundamental design principles in mind, especially the necessity to exert control.

There's more to say about this that touches on the example of the sign in, and I can expand if interested.

Re: SafeTest: A novel approach to front end testing

#29

Post by sibeliuss »

hmeh wrote: post #28
kolodny wrote: post #13

Earlier quoted context omitted.

Author here. Can you show an example of how Playwright would progress a timer on a page? For example, how would you make this component pass faster than 60 seconds? export const Countdown = () => { const [time, setTime] = React.useState(60); React.useEffect(() => { const interval = setInterval(() => { setTime(t => t - 1); if (t === 1) clearInterval(interval); }, 1000); return () => clearInterval(interval) }, []); ret…

I'm afraid the answer to this doesn't actually lie in tooling. It lies in software design. If something needs to be controlled, it needs to be controllable. Typically this means push. In a React component, this means props. It could be an optional prop, but once that prop was there, this component could be controlled. Once the component could be controlled via push, the page rendering the component could also be cont…

Need to print this and hang it on my wall! Exactly.

Re: SafeTest: A novel approach to front end testing

#30

Post by throwaway290 »

kolodny wrote: post #18
throwaway290 wrote: post #17

Earlier quoted context omitted.

I like the library, but isn't createOverride / useValue basically modifying components to allow testing?

Creating an override is basically just providing a placeholder for a value to be injected via React Context. I view this as a form of dependency injection. Contrast this with how this would be done in vanilla Playwright with reading it from a query param or exposing a global to call page.evaluate on which is more along the lines of forcing test code into a component. Note that if you needed a specific reference in an…

Should it be general framework focused on DI for React? That can make overrides more organic and have more benefits than just testing
Post reply on HN