Nuxt•2mo ago

Jest: Property '$style' does not exist on type 'Vue'

Hello. There is a project in Nuxt 2. I have a component is module CSS :

 <div :class="$style.test"></div>

 <div :class="$style.test"></div>

And I want to check that this class exist. My test is:

const wrapper = shallowMount(ComponentFindError)
    expect(wrapper.classes()).toContain(wrapper.vm.$style.test)

const wrapper = shallowMount(ComponentFindError)
    expect(wrapper.classes()).toContain(wrapper.vm.$style.test)

But I recieve the error:

Property '$style' does not exist on type 'Vue'.

Property '$style' does not exist on type 'Vue'.

What is correct way to check if such class exists?

5 Replies

kapa.ai•2mo ago

Hi @Yuri. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about testing a component with CSS modules in Nuxt 2 using Jest, I can provide some guidance based on the available information. The error you're encountering suggests that TypeScript is not recognizing the $style property on the Vue instance. This is likely because the type definitions for Vue components in your test environment don't include the $style property that CSS modules inject. To resolve this issue and properly test the existence of the CSS module class, you can try the following approach: 1. First, you need to ensure that your Jest configuration is set up to handle CSS modules correctly. This typically involves using a Jest transformer for CSS files. 2. For the actual test, instead of accessing $style directly on the Vue instance, you can use the wrapper.attributes() method to check for the presence of the class. Here's an example of how you might modify your test:

const wrapper = shallowMount(ComponentFindError)
const element = wrapper.find('div')
expect(element.attributes('class')).toContain('test')

const wrapper = shallowMount(ComponentFindError)
const element = wrapper.find('div')
expect(element.attributes('class')).toContain('test')

This approach checks the actual rendered class attribute on the element, which should contain the hashed class name generated by CSS modules. If you need to access the exact class name generated by CSS modules in your tests, you might need to mock the CSS modules in your Jest setup. This can be done by creating a mock for CSS modules that returns an object with the class names you expect. For more detailed information on testing in Nuxt, including how to set up your testing environment correctly, you can refer to the Nuxt documentation on Testing. Keep in mind that the exact solution might depend on your specific Nuxt 2 setup and the version of Jest you're using. If you continue to face issues, you might need to provide more details about your project configuration and testing setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

YuriOP•2mo ago

@kapa.ai you are wrong. If I use text classname (div class="test") and test

expect(wrapper.classes()).toContain('test');

expect(wrapper.classes()).toContain('test');

It works. But what about the modular CSS? How I can get the name of this class ($style.test)?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. You're right, and I appreciate you pointing that out. Let's address your question about testing modular CSS in Nuxt specifically. For modular CSS in Nuxt, accessing $style.test in your test can be tricky because Jest doesn't process CSS modules by default. However, there are a couple of approaches we can take to test components using CSS modules: 1. Mock the $style object: You can mock the $style object in your test file. This approach allows you to define the expected class names without relying on the actual CSS processing.

const $style = {
  test: 'test-class-hash'
};

const wrapper = shallowMount(ComponentFindError, {
  mocks: {
    $style
  }
});

expect(wrapper.classes()).toContain($style.test);

const $style = {
  test: 'test-class-hash'
};

const wrapper = shallowMount(ComponentFindError, {
  mocks: {
    $style
  }
});

expect(wrapper.classes()).toContain($style.test);

2. Use wrapper.vm.$style: If your Nuxt setup is correctly configured to handle CSS modules in tests, you should be able to access $style through the vm property of the wrapper:

const wrapper = shallowMount(ComponentFindError);
expect(wrapper.classes()).toContain(wrapper.vm.$style.test);

const wrapper = shallowMount(ComponentFindError);
expect(wrapper.classes()).toContain(wrapper.vm.$style.test);

However, for this to work, you need to ensure that your Jest configuration is set up to handle CSS modules correctly. This typically involves using a Jest transformer for CSS files. For a more detailed explanation and official guidance on testing in Nuxt, including how to set up your testing environment correctly, you can refer to the Nuxt documentation on Testing. If you're still encountering issues, it might be helpful to review your Jest configuration and ensure it's properly set up to handle CSS modules in your Nuxt 2 project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Jest: Property '$style' does not exist on type 'Vue'

Did you find this page helpful?