The pattern to check if a React component contains something with Enzyme + Jest seems to be this one:
expect(shallow(<Field title="hello" />).contains(<p id="hello"></p>)).toBe(true);
The main problem I face with this kind of code is that I have no clue what the problem is if the expectation fails. Because it uses the pattern "expect boolean to be boolean", the only error I get is:
expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false
It does not really help. Is there a way to get more precise error when testing if a React element contains something?
Yes, there are more ways of checking if the element is present within the component. And if your test case fails you can debug the wrapper to check what went wrong. .debug() won't pinpoint the error but I think it will make debugging very easy since you get what is being rendered by shallow/mount.
The following command will help you debug a wrapper.
const wrapper = shallow(<Field title="hello" />);
console.log(wrapper.debug());
I have created a sandbox to demonstrate the same there I use 'contains' and 'find' on the wrapper to check if p is present with id as "hello" and also on the console you can see the output of wrapper.debug()
https://codesandbox.io/s/886799791j
Related
I created this CodeSandbox so I could demonstrate a problem with related code (the onChange not firing in a test):
https://codesandbox.io/s/festive-tree-xkw8s?file=/src/App.test.js
However in CodeSandbox I can't even get that far because as soon as I call
userEvent.type(securityField, 'abc{enter}')
I get a set this error in the console:
Error: Uncaught [TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.]
and as a result the loadOptions callback of AsynSelect is never triggered (locally I'm not having any issue with that, just the onChange which isn't firing).
I have not been able to find any examples of or guidance on this error. I haven't used CodeSandbox a lot so maybe I'm missing something basic.
I am not seeing this error in my local environment but I am trying to solve it because I want to finish setting up my original problem.
You want to use react-select-event for interacting with your react-select in testing. This was made specifically for testing with react-testing-library.
I'm following the goreact testess videos and trying here. I'm not having success in my attempts. I have the following error:
TypeError: ShallowWrapper :: dive () can not be called on Host Components
Error: https://imgur.com/Tq1OvPX
The project is in git, if you'd like to see the example as a whole better: https://github.com/henriqueweiand/reactjs-crud-state-test
Having a quick look at your project, you'll need to use something along the lines of...
wrapper
.find('DocumentosTable')
.dive()
.find('FaTrash')
.first()
.simulate('click');
Notice the note in the documents which should explain why you're seeing that error.
Dive can only be called on a wrapper of a single non-DOM component element node, otherwise it will throw an error.
For more information on dive go here
I am testing my React components using Jest/Enzyme.
In some of the test cases, the test fails with some exception.
What is a sane/standard way to handle error in Jest/Enzyme instead of breaking the test case?
e.g - the following case should pass if the 'Grid' component does not get any data as parameter.However, it fails with an exception which is being thrown out of the Grid component.
test('Grid does not render without data',()=>{
const wrapper=shallow(<Grid/>);
expect(wrapper.length.toBe(0));
})
You should not handle error in your test cases. Instead you should expect the code to throw errors.
You code should look something like this
test('Grid should throw when data is not passed',()=>{
expect(() => shallow(<Grid/>)).toThrow();
})
But ideally, when the right prop is not there, the component should not throw, instead, it should not render.
I'm trying to write Jest tests for a React component which contains a DashJS media player. I'm using Enzyme's mount method to try and test the component, but it seems that the DashJS media player fails to mount properly.
In my componentDidMount method, I have the following code:
this.videoManager = dashjs.MediaPlayer().create();
this.videoManager.initialize(this.videoPlayer, videoUrl, true);
// Where this.videoPlayer is a reference to an HTML <video> element
this.videoManager.preload();
The last line (this.videoManager.preload();) produces the following error:
You must first call attachSource() with a valid source before calling this method thrown
When I run the component it works normally - it's only the testing I'm having issues with. I haven't been able to find any related issues/solutions online.
I'm using the following versions of each relevant package:
react: "16.2.0"
dashjs: "2.6.7"
jest: "22.3.0"
enzyme: "3.3.0"
enzyme-adapter-react-16: "1.1.1"
Any help will be appreciated!
That error implies that there was some issue with videoUrl, which caused the value passed in initialize not to be set. When preload checks that a valid source has been set, the error is thrown.
At a guess, is videoUrl an empty string in your test but non-zero length when the component is used normally?
Looking at this again, the problem is probably that you are (presumably) using JSDOM to provide the DOM for your tests, and JSDOM does not provide MediaSource or WebKitMediaSource in window. This causes dash.js to fail to initialise. dash.js should throw a capability error which can be caught using player.on('error', () => {}).
As a side note, you are providing a video object to initialize, as well as setting autoplay to true. Doing the first will cause preload do nothing since it will just load segments in to the SourceBuffer instead, which probably isn't what you wanted.
When I mock a react component like this jest.mock('react-slick', () => 'div'); I get console errors for unknown props passed to tag. I know these errors don't mean anything in this case, but it's quite annoying to see them in the output:
Is there a way to disable these errors? Maybe just don't pass any props to the component when it is mocked?
You can just mock the console.error, like so:
console.error = jest.genMockFn()
Jest will still fail the tests regardless of the above.